微信小程序开发实战1 微信小程序开发概述

大家好，又见面了，我是你们的朋友全栈君。

1.微信小程序开发概述

1.1微信小程序的特点

微信小程序是微信平台提供的一种开放技术，微信小程序为企业用户服务，用于建立一种移动端的“轻应用”，这种应用是不需要下载安装即可使用的应用，用户扫一扫或者搜一下即可打开应用。用户也不用关心是否安装了太多应用的而造成手机空间不足问题。微信小程序的推出后，与订阅号、服务号、企业号并列成为微信的企业应用体系。

图1-1 微信公众平台产品类型
微信小程序运行在微信平台之上，微信平台对不同的手机平台已经做了兼容。使用微信小程序开发的应用，不需要兼容多个平台，开发完成后可以直接运行于多个平台，降低了应用的开发门槛。
针对传统H5应用的不足，微信小程序对用户交互性能做了众多的优化，使微信小程序的应用在部分用户体验上接近了App的水准。
微信小程序没有采用网页编程中的HTML5+CSS3+JavaScript组合，微信小程序使用腾讯全新定义的技术规范和架构。不过微信小程序的开发与网页编程以及微信公众号编程非常类似，对于前端开发者而言，从网页开发迁移到微信小程序的开发成本并不高。微信小程序吸收了主流前端开发中数据、样式、控制逻辑分离的理念，将每个页面分为四个文件：WXML文件、WXSS文件、JSON文件、JS文件。其中JS文件采用标准的JavaScript语法规范，用于逻辑操作。JSON文件基于JSON语法规范，用于页面文件的配置。WXML文件基于XML语法规范，用于页面视觉组件的描述。而WXSS继承了标准的CSS语法，用于WXML组件样式的定义。
网页开发中渲染线程和脚本线程是互斥的，而在微信小程序中二者是分开的，分别运行在不同的线程中。微信小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图所示。

图1-2 小程序的通信模型
网页开发者可以使用浏览器DOM API来操作DOM对象。小程序的逻辑层和渲染层是分开的，逻辑层运行在JSCore中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端的一些库，例如jQuery、Zepto等在小程序中是无法运行的。同时JSCore的环境同 NodeJS环境也是不尽相同，所以一些NPM的包在小程序中也是无法运行的。
小程序每次冷启动时，都会检查是否有需要更新版本，如果发现有新版本，将会下载新版本的代码包到本地。因此小程序的页面加载是基于本地的，不需要通过频繁的发送网络请求来获取页面文件，所有的页面跳转也都不需要通过与服务端进行交互。这将使小程序的执行效率大大提高，比使用H5的Web应用模式有更好的用户体验，操作流畅度与反应速度也会更好。这也意味着在没有网络连接的环境下也可以使用微信小程序。结合本地存储，小程序可以满足暂时断网或网络情况较差的场景需求，这是微信服务号和H5都无法实现的。

图1-3 小程序运行模型
微信小程序的出现，为开发者提供了一种新的应用开发框架。即除了能够选择APP开发、H5开发（HTML5网页开发）、微信公众号开发，还可以选择使用微信小程序来实现移动端应用。接下来分别将微信小程序与APP以及微信公众号进行对比，使大家了解微信小程序、APP以及微信公众号这三个产品各自的优势与不足，方便大家开发应用时做出合适的选择。

小程序与App的区别

Native App，大多数情况下也称为APP，具有性能、体验非常良好，组件支持完善、接口丰富等特点。但App也有一系列缺点，主要有：

• App不支持跨平台开发，有多少个平台就要开发多少个版本，大多数APP都需要同时开发安卓版本和IOS版本。
• 首次使用门槛高。首先要在应用市场下载并安装，然后注册登录后才能使用。下载安装需要耗费网络流量以及安装时间，另外安装在手机上会消耗手机的存储空间。App的这个缺陷会造成部分用户因为下载安装的繁琐而拒绝下载APP，造成用户的流失。
  微信小程序恰好能够解决上面的问题，微信小程序已经做好了安卓和IOS的兼容，开发好微信小程序后既能在安卓手机上使用，也能在IOS手机上使用。另外小程序不需要下载安装，通过扫一扫就能直接使用。不过相对于App，微信小程序有以下不足：
• 在扩展性这方面，App显然有更大的优势，App可以全方位访问原生系统提供的API，而微信小程序建立在微信客户端上，小程序的功能完全受限于微信客户端提供的API。
• App的用户体验更佳，App安装在手机客户端，不需要从服务器加载，减少了应用加载的时间。
• App使用路径更短，App虽然首次使用比较麻烦，需要下载安装，但是安装后的使用相对便捷。App就在用户的手机桌面上，打开手机就能直接使用。小程序使用的时候则有点繁琐，需要打开微信客户端，然后在小程序列表中找，用户难以快速发现并打开小程序。
  总体来说微信小程序适合用户体验要求不高的应用，基本上适合Web应用的都可以用小程序来实现。另外还有一些“重量级“的应用早起也会采用微信小程序来开发，这些应用的早期会采用微信小程序来快速实现业务模型，并进行市场验证，然后在业务发展到一定阶段后再采用App重构应用系统。

微信小程序与微信公众号

微信小程序与微信公众号（服务号）在功能上有部分重叠，都能够用来实现面向企业的应用，特别是早期微信只提供了微信公众号，面向企业的应用基本上用微信公众号来实现。微信公众号本质上是一种H5应用，它具有传统H5应用的特点，例如每次刷新页面都要去服务器读取内容。因此微信公众号虽然也能够实现业务服务，但是在用户体验上距离Native PP有较大的差距。而微信小程序的目标就要提升应用的用户体验，使之接近APP的水准。因此微信小程序出现后使之与微信公众号在定位上有了明显的区别。基本上可以基于以下标准进行取舍：

• 定位的不同
  小程序面向产品与服务，主要以实现业务功能为主，致力于打造线上线下相融合的企业服务场景。
  微信公众号主要服务于企业和个人的营销与信息传递需求，是一种新的信息传播方式。公众号依赖粉丝经济，结合H5后，能够在公众号内提供一些简单的营销和交互功能。
• 用户体验的差别
  微信小程序对用用户交互性能做了众多的优化，使用体验接近App。而公众号开发借助于H5 开发技术来实现交互功能，运行环境是基于浏览器，等同于手机网页端的应用。因此上微信公众号主要用于业务逻辑与交互简单的应用中，体验良好的应用都应该用小程序来创建或者重构。
  具体上来说微信小程序被微信平台开放了更多的接口功能，基本可覆盖大多数行业的需求。相较于公众号，它在视频直播、商城、小游戏等强互动的领域表现更佳。公众号开发适合用户交互相对较少的应用类型，比如微商城、微官网等。
  虽然微信公众号与小程序各有一定的应用场景，但是在实际上使用时不是二选一的，一个企业可以同时注册微信公众号和小程序。企业使用微信小程序承载企业的业务服务，并使用公众号进行企业的宣传与营销。微信公众号是单独申请的，微信小程序即可以单独申请，也可以通过微信公众号快捷申请。对于没有公众号和小程序的商家来说，正确的申请注册流程应该是先申请认证微信公众号，然后在公众号后台的【小程序管理】页面中直接快速注册小程序。微信公众号+小程序的模式已经成为企业运营推广的一个标配。

1.2微信小程序开发过程

1.2.1 注册小程序

开发微信小程序需要首先注册一个小程序账号，注册成功后登录微信小程序管理后台，完成小程序开发者绑定、开发信息配置，然后开发者就可以下载开发者工具、使用开发者工具进行小程序的开发了。
微信公众号是单独注册申请的，微信小程序即可以单独注册申请，也可以通过微信公众号快捷申请注册。对于没有公众号和小程序的商家来说，正确的申请注册流程应该是先申请认证公众号，然后在公众号管理后台的【小程序管理】页面快速申请小程序。微信公众平台的网址为：https://mp.weixin.qq.com。
微信小程序注册是需要一个邮箱作为账号，小程序注册成功后，可以使用该邮箱+登录密码登录微信小程序管理后台。
为方便开发者开发和体验小程序的各种功能，开发者可以申请小程序的测试号，并使用此帐号在开发者工具创建项目并进行开发测试，以及真机预览体验。小程序的测试号使开发者避免了繁琐的注册过程，降低了初始使用小程序开发的门槛。小程序的测试号的申请地址为：
https://mp.weixin.qq.com/wxamp/sandbox?doc=1

1.2.2 小程序开发配置

小程序开发的账号申请成功之后，需要登录小程序管理后台进行小程序的设置，填写小程序基本信息，例如名称、头像、介绍以及服务范围等。
您可以在【开发】->【开发管理】页面中看到小程序的AppID。小程序的AppID相当于小程序平台的一个身份证，后续你会在很多地方用到它。

图1-4 小程序设置页面

另外在进行小程序开发前，需要在微信小程序后台将开发人员的微信号添加到项目成员中。只有添加到小程序项目成员的人员才可以使用微信小程序开发工具进行小程序开发、调试、上传程序包等功能。建议您可以将全部研发人员加入到项目成员中，项目组的其他非开发人员若需要体验小程序功能则需要添加到体验成员中。

图1-5 小程序成员管理

1.2.3 使用开发者工具开发小程序

由于小程序采用的是渲染和逻辑分离的运行机制，这种做法与传统的网页的运行机制存在差异，无法使用传统的网页编程中的开发、调试工具，为此微信专门为小程序开发推出了一个一站式IDE：微信开发者工具。开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。
在小程序开发文档中可以找到小程序开发工具的下载页面，或者直接输入以下 网址进入小程序开发工具的下载页面：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。 在小程序开发工具的下载页面中根据自己的操作系统下载对应的安装包并进行安装。需要注意的是，小程序开发工具在Windows仅支持Windows 7及以上版，在Mac上支持OS X 10.8及以上版本。另外需要说明的是微信小程序Web开发工具需要扫码登陆才可以使用，所以在使用前必须先绑定开发者。
首次使用开发者工具调试小程序时会出现这样的报错：“xxxxxxxxxx不在合法域名列表中”，这是因为在小程序中发起了wx.request请求，但是请求的域名没有在小程序管理后台中进行设置所致。服务器域名的设置请到小程序管理后台【开发】->【开发管理】->【开发设置】->【服务器域名】中进行配置。配置时需要注意：域名只支持https （wx.request、wx.uploadFile、wx.downloadFile） 和 wss (wx.connectSocket) 协议。域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost。

图1-6 小程序开发设置
为了降低开发门槛，开发者工具提供了一个选项，即使没有申请服务器域名也可以进行小程序的编码和调试。在微信开发者工具中点击【详情】->勾选【不校验合法域名】。这样就可以正常使用wx.request函数发送网络请求了。但是需要注意的是这做只是为了简化开发，当小程序发布上线时这种方式是行不通的，这个时候就需要配置合法域名了。
如果小程序中使用了Webview，并引用了第三方页面，在运行调试小程序是会出现“页面找不到”的错误提示。这个时候需要进行业务域名的配置。由于微信小程序本身的限制，不能直接在Web-view中随意跳转H5页面，需要先配置业务域名，才能在Web-view中跳转H5页面。

图1-7 业务域名配置
业务域名必须是https协议的，且业务域名需经过ICP备案。业务域名配置时需要下载校验文件，并将文件放置在域名根目录下，并确保可以访问到该文件。

1.2.4审核与发布

完成小程序开发后，提交代码至微信团队进行审核，审核通过后即可发布。详细发布说明请参见后面的章节。

1.3第一个小程序

打开微信小程序开发者工具，扫码登录后进入小程序项目管理界面：

图1-8 小程序项目管理界面
点击小程序项目管理界面中部的添加小程序指示区即可打开小程序的新建项目界面：

图1-9 小程序的新建项目界面
每个微信小程序必须指定一个小程序的APPID，小程序的APPID可以在小程序管理后台的界面中获取，具体获取方法参见章节1.2.2。在图1-9所示的界面中选择小程序项目，输入小程序的项目名称，选择代码存放的路径，填入在小程序管理后台获取到的APPID，勾选 “不使用云服务”，点击新建，你就创建了你的第一个小程序项目了。
使用微信小程序开发者工具创建小程序项目时，微信小程序开发者工具会生成一些demo代码，真正的开发中通常会删除这些预生成的代码。为了快速理解微信小程序的结构，我们也删除这些代码，从头开始建立一个简单的小程序，这个小程序只输出一行文字：Hello World。
首先在Demo项目根目录下创建app.json文件，其内容如下。

{ 
   
  "pages":[
    "pages/index/index"
  ]
}

然后在Demo项目根目录下新建pages目录，在pages目录下新建index目录，接着在index目录下创建两个文件index.wxml和index.js。
index.wxml的内容为：

<view>
  <view style="text-align:center;padding:200rpx">
    <text>{
  
  {motto}}</text>
  </view>
</view>

index.js的内容为：

Page({ 
   
  data: { 
   
    motto: 'Hello World',
  },
  onLoad() { 
   
  }
})

完成上述步骤后开发者工具的结构如下：

点击小程序开发者工具的“编译”命令，开发者工具会对demo项目的内容进行编译，并在微信开发者工具的模拟器界面上显示出Hello World结果：