微信小程序--底层运行原理

说明：资料来源于王红元老师在B站发布的视频。视频质量很高。

（https://space.bilibili.com/368931401?spm_id_from=333.788.b_765f7570696e666f.1）

---

小程序的MVVM架构

• 小程序的MVVM架构中，视图层通过Mustache（{{ }}）接受经过Data Bindings处理的逻辑层数据；而逻辑层通过DOM Listeners监听视图层的绑定；
• MVVM架构使得小程序为声明式编程；命令式编程为采用原生DOM进行编程。

小程序的双线程模型

• Native为小程序的宿主环境。为了执行小程序的各种文件（wxml、wxss和js）；提供了小程序的双线程模型。
• 双线程模型：WXML模板和WXSS样式运行于渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使用多个WebView的线程）；JS脚本运行于逻辑层，逻辑层使用JsCore运行JS脚本；这两个线程都会经由微信客户端（Native）进行中转交互。

  

• 界面渲染过程：

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

（2）初始化渲染：wxml和js文件进行结合转化成JS对象，再转化为真正的DOM树之后进行渲染。

（3）数据发生变化：当wxml文件中需要的js文件中的数据发生改变时，会产生一个新的JS对象，使用diff算法进行比较得到的变化的部分应用到原来的DOM树上，再进行渲染更新UI，这也是“数据驱动”的原理。

•  界面渲染整体流程：

（1）在渲染层，宿主环境会把wxml和js转化成JS对象；

（2）JS对象再转化成真实的DOM树，交由渲染层线程进行渲染；

（3）当绑定的数据发生改变时，逻辑层将提供最新的变化数据，再生成一个JS对象，此时，两个JS对象通过diff算法进行对比得到最后经过变化的真是DOM树；

（4）渲染层将渲染最新的DOM树，更新UI；

小程序的启动流程

• 在前面的双线程模型中对于页面的渲染已经介绍清楚了。这里是对小程序的启动流程进行介绍，更重要的是为应用或者页面的生命周期函数进行介绍。
• 流程介绍：

（1）项目首先加载app.json项目配置文件，此文件中的对象包含pages、window、tabBar等属性，其中这三个属性最为常用，分别为页面的设置、应用的配置、底部标签栏；

（2）加载app.js文件，此文件中的App()函数中包含一系列的生命周期函数，也可在此文件中设置项目的共享数据，通过getApp()函数进行引用；

（3）在编译为普通编译的情况下加载app.json中的pages属性的第一个页面。依次先加载页面的page.json-->page.wxml和page.js结合进行渲染（参考小程序的双线程模型），在这个阶段中page.js中的生命周期函数会执行；

• 生命周期的介绍：生命周期函数的使用非常频繁和巧妙。App生命周期函数应用的范围对于整个小程序，而Page生命周期函数的应用范围对于当前页面。官方文档中对生命周期函数的介绍资料很少。在B站的视频中王红元老师对生命周期函数进行了详细的介绍，有兴趣的可以去看视频。
• App生命周期函数：App生命周期函数在app.js文件中，这个文件是个全局文件，对于生命周期函数也是应用级的生命周期函数。其主要包括onLanuch()、onShow()、onHide()和onError()。

onLanuch():小程序启动时执行的函数，当小程序初始化时执行，只执行一次。（活期大概为2个小时）

onShow():小程序显示或切回时执行的函数，没有次数限制。

onHide():小程序切后台时执行的函数，没有次数限制。

onError():小程序中发生错误和异常时执行，没有次数限制。

执行顺序：onLanuch()-->onShow()，对于onHide()和onError()则要看具体的情况。

• Page生命周期函数：page.js中包含着页面级的生命周期函数和一些页面初始化数据（data）以及组件事件函数。对于生命周期函数，常用的有onLoad()、onReady()、onShow()、onHide()、onUnload()等。页面滚动、下拉至顶和上拉刷新这里不做介绍。

onLoad():页面加载时执行的函数，只执行一次。

onReady():页面渲染完成时执行，只执行一次。

onShow()；页面显示时执行，没有次数限制。

onHide()；页面隐藏时执行，没有次数限制。

onUnload():页面卸载时执行，在进行页面跳转时执行。

执行顺序：onLoad()-->onShow()-->onReady()，onHide()和onUnload()看情况执行。

生命周期图解析

•  这是小程序的页面生命周期的解析图。参考着小程序的双线程模型进行理解。