2017 年 3 月 27 日晚，微信小程序通过“微信公开课”与“微信公众平台”两个官方公众号宣布，即将上线 6 个新功能：个人开发者开放申请小程序、公众号自定义菜单点击可打开相关小程序、公众号模板消息可打开相关小程序、绑定时可发送模板消息、兼容线下二维码、App分享用小程序。看来是时候紧跟潮流，研究一下微信小程序了。 说起来，从来没有一款产品能像微信这样深刻地改变用户的社交方式，更没有一款产品，能像小程序一样，还未发布就引起业界绝大多数企业和开发者的高度关注。2016 年的微信公开课上，张小龙首次提出了应用号的概念。时隔一年，在 2017 年的微信公开课上，张小龙预告微信小程序将于 2017 年 1 月 9 号上线。 微信公众号相比较于传统的App而言，开发、获取用户和传播成本都相对较低，因此，越来越多的产品都通过公众号来运营，它也是初创型企业实现Demo版本的首选。但是，由公众号拆分出来的服务号并没有提供更好的服务，因此，微信生态中需要一个能改变这种现状的新的形态出现。2016 年 1 月 9 日，张小龙第一次在公开场合提出了应用号的概念，应用号将肩负这种使命。应用号正式发布后更名为小程序。 “一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验。”这是微信官方对小程序的介绍。下面我们从开发者的角度来聊聊微信小程序。
小程序存在的价值和意义，是要让用户触手可及，用完即走。它不希望用户花过多时间在小程序的使用上。小程序在微信客户端的“发现”菜单中有一级搜索入口，其余的主要入口依然是二维码，这也说明微信对线下布局的重视。 正如张小龙所言，我们要理解小程序，首先需要理解PC时代的官网。在PC时代，没有官网不行，因为它是用户了解你的企业的重要入口，从官网可以看出你是不是一家靠谱的企业。但是，官网并不会是你的全部。如今的小程序时代，用户在需要某类服务时，会第一时间想到在微信上搜索你的小程序也显得非常重要。 最新版本的微信开发者工具，已经集成了小程序的开发环境，启动之后在调试类型中选择“本地小程序项目”，添加工程，填写AppID和项目名称，如图 1 所示。假如还没有在小程序管理后台添加应用，则选择“无AppID”，可以直接进入Demo工程。 图1 创建微信小程序工程 项目创建成功后，进入项目就可以看到完整的开发者界面了，其主体布局和公众号的调试界面类似。左侧有“编辑”“调试”和“项目”三大功能区域。进入编辑模块，可以在右侧看到整个工程的代码结构，如图 2 所示。 图2 微信小程序工程目录结构 最外层的三个文件，app.js、app.json和app.wxss是必不可少的。app.js是小程序的脚本代码，负责监听并处理小程序的生命周期，声明全局变量，调用框架API，也是小程序的入口；app.json是小程序的配置文件，包含小程序的所有页面声明；app.wxss是小程序的公共样式表，语法和CSS类似。 为了减少配置项，小程序中一个页面的所有文件都具有相同的路径和文件名。例如user页的目录下，将会有user.js、user.json、user.wxml、user.wxss四个文件，其中user.js和user.wxml是必需的文件，分别是页面逻辑和页面结构。user.wxss和user.json为非必需文件，存放页面的样式表和配置信息。 小程序工程里的app.json文件中的pages数组记录了所有的页面配置，其中第一个值是小程序启动之后默认启动的页面。小程序中的每个页面必备JavaScript和wxml文件。建立页面时有一个小技巧，假如要新建user页面目录及文件：首先在pages目录中新建user目录，然后在工程根目录的app.json中的pages属性中新增pages/user/user，保存app.json文件，编译器会自动在pages/user目录中新建user.js、user.json、user.wxml、user.wxss四个文件。知道了编译器的这个功能，就不用在新增页面时手动去新建小程序页面文件了。 目录中的文件修改并保存后，编译器会自动对工程进行编译，开发者可以切换到“调试”项中查看小程序的调试日志（Console）、JavaScript源码（Sources）、网络请求（Network）、本地存储（Storage）、页面源码（Wxml）和AppData，如图 3 所示。 图3 小程序调试 小程序在真机上预览时，也可以打开调试模式。在小程序界面，点击右上角菜单，在弹出的菜单中选择“打开调试”，重新打开小程序，就会在右下角看到“vConsole”按钮，点击之后即可打开调试界面，这里输出的调试信息和开发者工具的基本一致，如图 4 所示。 小程序开发基于小程序开发框架（MINA），框架的核心是一个响应的数据绑定系统，让数据与视图能保持同步。此外，框架也提供了视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，同时也在视图层和逻辑层间提供了数据传输和事件系统，开发者只需要聚焦到业务逻辑的开发中。小程序开发框架的存在使开发更加简单和高效。 图4 小程序真机调试 小程序开发框架除了提供基本的底层基础能力（例如页面路由），还提供了组件和丰富的API。组件包含视图容器、表单、地图和画布等，是视图层的基本组成单元，在样式表现上，也跟微信风格高度一致。此外，框架还提供了微信原生API，可以方便地使用微信独有的功能（“支付”“扫一扫”），它的作用和微信网页开发中的JS-SDK类似。此外，API接口也具备网络请求（包含HTTP请求和Socket链接）、上传下载和数据存储等基本能力。微信小程序相对于HTML5应用能获取更多底层权限，使小程序具备Native App的流畅性。 微信小程序账号注册审核通过之后，就可以在后台进行相关的开发配置了，主要包括开发者身份配置、服务器域名配置等。
图5 小程序服务器信息配置 小程序发起的请求域名需要在后台配置，并且要求采用HTTPS协议，以确保数据传输的安全性。HTTPS是以安全为目标的HTTP通道，它在HTTP下加入SSL层，以确保网站机密信息从用户浏览器到服务器之间的传输是以高强度加密传输。HTTPS协议需要到CA（Certification Authority）申请证书，免费的证书较少或者有效期短，CA通常需要交费。 在开发阶段，可以在小程序开发者工具中设置不对请求域名进行验证。也可在开发者服务器颁发未认证证书进行调试开发。下面以CentOS中生成自签名证书的步骤为例进行讲解。 ① 安装SSL模块。 yuminstallmod_sslopenssl ② 生成 2048 位加密私钥。 opensslgenrsa-outca.key2048 ③ 生成证书签名（CSR）。 opensslreq-new-keyca.key-outca.csr ④ 生成类型为X509的自签名证书，执行完命令后会生成ca.crt、ca.csr和ca.key三个文件。
⑤ 拷贝文件到指定目录。 cpca.crt/data/ssl/cpca.csr/data/ssl/cpca.key/data/ssl/ ⑥配置Apache，在虚拟目录中新增证书文件。 |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
