谁是小程序的宿主环境呢?显而易见小程序的宿主环境是微信。
宿主环境为了执行小程序的各种文件:wxml文件、wxss文件、js文件,提供了双线模型。
wxml文件:通俗的来做这类文件是用来做布局的,类似网页开发中的html。
wxss文件:类似网页开发中的css,是用来做样式的。
js文件:是用来写很多逻辑的,可以称为逻辑层。
双线程是什么?我们来看个官方的截图:
逻辑层:创建一个单独的线程去执行 JavaScript,在这个环境下执行的都是有关小程序业务逻辑的代码
渲染层:界面渲染相关的任务全都在 WebView 线程里执行,通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程
界面渲染-初始化渲染
WXML可以先转成Js对象,在渲染成真正的DOM树如下图:
界面渲染过程-数据发生变化
通过setData把msg数据从“Hello Word”变成“Goodbye”为例简述。
产生的js对象对应的节点就回发生变化
此时可以对比前后两个JS对象得到变化的部分
然后把这个差异应用到原来的Dom树上
从而达到更新UI的目的,这就是“数据驱动”的原理
如下图所示:
界面渲染的整体流程
在渲染层,宿主环境会把WXML转化成对应的JS对象;
将JS对象再次转化成真实DOM树,交由渲染层线层渲染;
数据变化时,逻辑层提供最新的变化数据,JS对象发生变化比较进行diff算法对比;
将最新变化的内容反映到真实的DOM树种,更新UI;