微信小程序开发——第3章 理解小程序宿主环境

微信小程序学习总结

3.1 渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层，WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

3.1.1 渲染“Hello World”页面

WXML模板使用 view 标签，其子节点用 { { }} 的语法绑定一个 msg 的变量：

<view>{
   {
    msg }}</view>

在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World” ：

Page({
   
  onLoad: function () {
   
    this.setData({
    msg: 'Hello World' })
  }
})

1. 渲染层和数据相关。
2. 逻辑层负责产生、处理数据。
3. 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

3.1.2 通信模型

小程序的渲染层和逻辑层分别由2个线程管理。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发。

3.1.3 数据驱动

可以让状态和视图绑定在一起（状态变更时，视图也能自动变更），则可以省去手动修改视图的工作

3.1.4 双线程下的界面渲染

小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面

3.2 程序与页面

从逻辑组成来说，一个小程序是由多个“页面”组成的“程序”

3.2.1 程序

“小程序”指的是产品层面的程序，而“程序”指的是代码层面的程序实例，为了避免误解，下文采用App来代替代码层面的“程序”概念。

1.程序构造器App()

宿主环境提供了 App() 构造器用来注册一个程序App，需要留意的是App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。
getApp() 获取App实例

// other.js
var appInstance = getApp()

App构造器：

App({
   
  onLaunch: function(options) {
   },
  onShow: function(options) {
   },
  onHide: function() {
   },
  onError: function(msg) {
   },
  globalData: 'I am global data'
})

App构造器接受一个Object参数，参数说明见下表，其中onLaunch / onShow / onHide 三个回调是App实例的生命周期函数.

参数属性	类型	描述
onLaunch	Function	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	当小程序从前台进入后台，会触发 onHide
onError	Function	当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息
其他字段	任意	可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问

2. 程序的生命周期和打开场景

初次进入小程序时，微信客户端初始化宿主环境，同时从网络下载或者从本地缓存中拿到小程序的代码包，将其注入到宿主环境；初始化后，微信客户端给App实例派发onLaunch事件，App构造器参数定义的onLaunch方法被调用。
进入小程序后，点击右上角的关闭，或者按Home键离开小程序，此时小程序并没有被销毁，称这种情况为“小程序进入后台状态”，App构造器参数定义的onHide方法会被调用。
当再次回到微信或者再次打开小程序时，微信客户端会把“后台”的小程序唤醒，称这种情况为“小程序进入前台状态”，App构造器参数定义的onShow方法会被调用。
App的生命周期是由微信客户端根据用户操作主动触发的
onLaunch和onShow带参数

App({
   
  onLaunch: function(options) {
    console.log(options) },
  onShow: function(options) {
    console.log(options) }
})

具体参数类型及其描述见文档

3. 小程序全局数据

小程序的JS脚本是运行在JsCore的线程里，小程序的每个页面各自有一个WebView线程进行渲染，所以小程序切换页面时，小程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程中。
不同页面直接可以通过App实例下的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。
小程序全局共享数据：

// app.js
App({
   
  globalData: 'I am global data' // 全局共享数据