小程序的双线程模型

2019-09-08 09:32:32 53

谁是小程序的宿主环境呢?显而易见小程序的宿主环境是微信。

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

wxml文件:通俗的来做这类文件是用来做布局的,类似网页开发中的html。

wxss文件:类似网页开发中的css,是用来做样式的。

js文件:是用来写很多逻辑的,可以称为逻辑层。

双线程是什么?我们来看个官方的截图:

新乡龙8国际娱乐网页版建设|新乡网络公司|新乡小程序开发|新乡APP开发

逻辑层:创建一个单独的线程去执行 JavaScript,在这个环境下执行的都是有关小程序业务逻辑的代码 

渲染层:界面渲染相关的任务全都在 WebView 线程里执行,通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程


界面渲染-初始化渲染

WXML可以先转成Js对象,在渲染成真正的DOM树如下图:

新乡龙8国际娱乐网页版建设|新乡网络公司|新乡小程序开发|新乡APP开发

界面渲染过程-数据发生变化

通过setData把msg数据从“Hello Word”变成“Goodbye”为例简述。

  1. 产生的js对象对应的节点就回发生变化

  2. 此时可以对比前后两个JS对象得到变化的部分

  3. 然后把这个差异应用到原来的Dom树上

  4. 从而达到更新UI的目的,这就是“数据驱动”的原理

如下图所示:

新乡龙8国际娱乐网页版建设|新乡网络公司|新乡小程序开发|新乡APP开发

界面渲染的整体流程

  1. 在渲染层,宿主环境会把WXML转化成对应的JS对象;

  2. 将JS对象再次转化成真实DOM树,交由渲染层线层渲染;

  3. 数据变化时,逻辑层提供最新的变化数据,JS对象发生变化比较进行diff算法对比;

  4. 将最新变化的内容反映到真实的DOM树种,更新UI;