说明:资料来源于王红元老师在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()看情况执行。
生命周期图解析
- 这是小程序的页面生命周期的解析图。参考着小程序的双线程模型进行理解。