小程序框架渲染原理及双线程通信 (2)

wxml 转换成对应的 js 文件,等待生成虚拟dom函数 $gwx 准备完成,使用 dispatchEvent 通知 WAWebview。

小程序框架渲染原理及双线程通信

WAWebview 监听到 generateFuncReady 事件触发,使用 WeixinJSBridge.publish 向逻辑层通信。

小程序框架渲染原理及双线程通信

逻辑层处理逻辑,也就是我们平常写的小程序 js 文件里的东西,然后通过 JS Bridge 通知并返回数据给视图层。

视图层接收到数据,将数据传入生成虚拟dom的函数内,渲染页面,当然小程序也有相应的diff算法。

例如在 wxml 中绑定一个动态数据 title,视图层接收到数据后,重新生成虚拟dom

generateFunc({
  title'标题'
})

初始化完成后,就会走对应的其他生命周期,或者用户触发事件,数据都会在逻辑层处理完成后通过 JS Bridge 通知到视图层,视图层再次调用生成虚拟dom的函数,更新页面。

wxss如何工作

wxss 工作原理和 wxml 差不多,都是通过工具转换为 js。为什么又是转换成 js,因为有 rpx 单位,需要根据手机尺寸进行设置 px。

wcsc.exe 转换命令如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspdpy.html