小程序学习笔记(三)之小程序的双线程模型

一.宿主环境

谁是小程序的宿主环境呢?微信客户端:

• 宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件
• 提供了小程序的双线程模型

双线程模型：

• WXML模块和WXSS样式运行于渲染层，渲染层使用WebView线程渲染(一个程序有多个页面，会使用多个WebVIew的线程)。
• JS脚本(app.js/home.js等)运行于逻辑层，逻辑层使用JsCore运行JS脚本。
• 这两个线程都会经由微信客户端(Native)进行中转交互。

二.页面渲染过程

1.wxml和DOM树：wxml等价于一颗DOM树，也可以使用一个JS对象来模拟(虚拟DOM)。

2.初始化渲染：WXML可以先转换成JS对象，再渲染出真正的DOM树；

3.数据发生变化：通过setData把data中的某个值改变：

1.产生的JS对象对应的节点会发生变化；
2.此时可以对比前后两个JS对象得到变化的部分；
3.然后把这个差异应用到原来的DOM树上；
4.从而达到更新UI的目的，这就是“数据驱动”的原理；

三.小程序的启动流程

如下图所示，通过了解小程序启动流程，我们就知道了代码的执行顺序：

• onLaunch:当小程序初始化完成时，会触发onLaunch（全局只触发一次）;
• onShow:当小程序启动，或从后台进入前台显示，会触发onShow;
• onHide:当小程序从前台进入后台，会触发 onHide;
• onError:当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// app.js
App({
  onLaunch: function () {
    wx.getUserInfo({
      success: function(res){
        console.log(res);
      }
    })
  },

  onShow: function (options) {
  
  },

  onHide: function () {
    
  },

  onError: function (msg) {
    
  }
})