微信小程序应用开发（一）

1.  前言

微信小程序应用是独立于微信公众号或者微信服务号的一种本地运行的网页程序式应用服务。因为微信小程序应用、微信公众号应用、微信服务号应用三者的服务方式都是以网页程序式提供服务，所以可以使用同一套网页程序。

他们的不同之处是微信公众号应用与微信服务号应用是在服务器端运行网页（BS架构模式），而微信小程序应用是在微信APP端的本地运行网页程序，其运行方式类似于HTML5的本地解析与运行。

微信小程序使用本地的运行模式，有利于提供更好的服务体验以及提供接近原生APP的使用体验。而且，具有跨平台以及便于发布、下载、升级的特性。是云计算时代中一种新的CS架构模式的体现。

1.1.  小程序运行时

1.1.1. 运行环境

微信小程序运行在多种平台上：iOS/iPadOS 微信客户端、Android 微信客户端、Windows PC 微信客户端、Mac 微信客户端、小程序硬件框架和用于调试的微信开发者工具等。

不同运行环境下，脚本执行环境以及用于组件渲染的环境是不同的，性能表现也存在差异：

• 在 iOS、iPadOS 和 Mac OS上，小程序逻辑层的 JavaScript 代码运行在JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 14、iPad OS 14、Mac OS 11.4 等；

• 在 Android 上，小程序逻辑层的 JavaScript 代码运行在 V8 中，视图层是由基于 Mobile Chromium 内核的微信自研 XWeb 引擎来渲染的；

• 在 Windows 上，小程序逻辑层 JavaScript 和视图层都是用 Chromium 内核；

• 在 开发工具上，小程序逻辑层的 JavaScript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。

JavaScriptCore 无法开启JIT 编译 (Just-In-Time Compiler)，同等条件下的运行性能要明显低于其他平台。

1.1.2. 平台差异

尽管各运行环境是十分相似的，但是还是有些许区别：

• JavaScript 语法和 API 支持不一致：语法上开发者可以通过开启 ES6 转 ES5 的功能来规避（详情）；此外，小程序基础库内置了必要的Polyfill，来弥补 API 的差异（详情)。

• WXSS 渲染表现不一致：尽管可以通过开启样式补全来规避大部分的问题，还是建议开发者需要在各端分别检查小程序的真实表现。

开发者工具仅供调试使用，最终的表现以客户端为准。

1.2.JavaScript 支持情况

1.2.1. 运行限制

基于安全考虑，小程序中不支持动态执行 JS 代码，即：

• 不支持使用 eval 执行 JS 代码

• 不支持使用 new Function 创建函数（new Function('return this') 除外）

1.2.2. 标准 ECMAScript 支持

小程序的 JS 执行环境 在不同平台上的执行环境存在差异，因此导致不同平台对 ECMAScript 标准的支持存在差异。

小程序基础库为了尽量抹平这些差异，内置了一份 core-js Polyfill。core-js 可以将平台环境缺失的标准 API 补齐。

需要注意的是，平台对 ECMAScript 语法的支持差异无法抹平，当你需要使用一些高级语法时（如 async/await 时，则需要借助代码转换工具来支持这些语法。

1.3.  小程序的生命周期

小程序从启动到最终被销毁，会经历很多不同的状态，小程序在不同状态下会有不同的表现。

1.3.1. 小程序启动

从用户认知的角度看，广义的小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

• 冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。

• 热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

从小程序生命周期的角度来看，我们一般讲的「启动」专指冷启动，热启动一般被称为后台切前台。

1.3.2. 前台与后台

小程序启动后，界面被展示给用户，此时小程序处于「前台」状态。

当用户「关闭」小程序时，小程序并没有真正被关闭，而是进入了「后台」状态，此时小程序还可以短暂运行一小段时间，但部分 API 的使用会受到限制。切后台的方式包括但不限于以下几种：

• 点击右上角胶囊按钮离开小程序

• iOS 从屏幕左侧右滑离开小程序

• 安卓点击返回键离开小程序

• 小程序前台运行时直接把微信切后台（手势或 Home 键）

• 小程序前台运行时直接锁屏

当用户再次进入微信并打开小程序，小程序又会重新进入「前台」状态。

1.3.3. 挂起

小程序进入「后台」状态一段时间后（目前是 5 秒），微信会停止小程序 JS 线程的执行，小程序进入「挂起」状态。此时小程序的内存状态会被保留，但开发者代码执行会停止，事件和接口回调会在小程序再次进入「前台」时触发。

当开发者使用了后台音乐播放、后台地理位置等能力时，小程序可以在「后台」持续运行，不会进入到「挂起」状态

1.3.4. 小程序销毁

如果用户很久没有使用小程序，或者系统资源紧张，小程序会被「销毁」，即完全终止运行。具体而言包括以下几种情形：

• 当小程序进入后台并被「挂起」后，如果很长时间（目前是 30 分钟）都未再次进入前台，小程序会被销毁。

• 当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。

1.4.小程序更新机制

开发者在管理后台发布新版本的小程序之后，微信客户端会有若干个时机去检查本地缓存的小程序有没有新版本，并进行小程序的代码包更新。但如果用户本地有小程序的历史版本，此时打开的可能还是旧版本。

2.  开发版本

微信小程序的开发方式使用微信官方提供的开发工具。

2.1.  绑定花生壳代理

花生壳服务器端代码的动态域名是：

https://55vl963292.goho.co/

2.2.  绑定微信小程序

• 登录微信小程序管理平台
• 绑定微信小程序消息推送域名地址

• 绑定微信小程序服务器域名地址

• 

2.3.  注册成为开发者

登录微信小程序管理平台注册

2.4.  开发小程序首页

2.4.1. 安装微信开发者工具

2.4.2. 新建小程序项目

新建项目时不使用云服务，所有后端服务接口使用花生壳的动态域名接口

2.4.3. 开发hello-world本地接口

2.4.4. 开发小程序首页

调用本地动态域名接口：

小程序首页展示本地hello world：

2.5.  程序版本发布小程序

2.6.  小程序管理后台发布

2.7.  微信APP查阅小程序

在微信APP中查询对应的小程序名称，即可访问对应的小程序

3.  商业版本

商业版本主要使用腾讯云提供的云服务实现，应用架构主要使用微信云开发以及微信云托管。

（未完待续）