【小程序】架构原理

本质上，小程序是 web 技术在手机 App 环境的移植。它完全采用 Web 技术栈，只是将网页引擎移植到了 App 容器里面。

一般来说，渲染界面的技术有三种：

1. 用纯客户端原生技术来渲染
2. 用纯 Web 技术来渲染
3. Hybrid 技术（混合模式移动应用）

这些技术都有安全性的问题，如果不对 JS 做出限制就不能保证小程序的安全性。

架构：双线程

小程序将逻辑层和渲染层分开，这保证了小程序的安全性，但是两个层面之间的通信成本会提高。

WXML 和 WXSS 工作在渲染层（webview），JS 脚本工作在逻辑层（jsCore）。并且每个小程序页面都是对应一个 webview 线程，这样性能比较好。

逻辑层

小程序需要对开发者进行管控，必须要考虑安全性，不能让开发者操作 DOM 和 BOM，因此需要提供一个纯 JS 编译环境。

JS 被隔离出来之后需要通过客户端进行 Native 操作。

视图层

每个小程序页面都对应一个 webview 线程，这样性能比较好。

通信 setData

小程序的软件架构，视图层是 webview 线程，逻辑层是 jscore 线程，并不具备直接通信的通道。所以为了视图层和逻辑层的通信，两边都采用了 evaluateJavascript 来和 Native 层通信，导致了小程序必须得通过显示调用的方式来修改 data 的值，这样才能够通知到 Native 层。

evaluateJavascript 只能传字符串，所以我们的 data 中的数据都会进行 JSON.stringify 转义成字符串进行传递。

一次完整的通信过程如下：

1. 渲染层 -> Native (点击事件)
2. Native -> 逻辑层 (点击事件)
3. 逻辑层 -> Native (setData)
4. Native -> 渲染层 (setData)

setData 的修改和 Vue 的机制类似，是对 data 进行同步的更新，但是对于渲染层的改变却是异步的。

参考

小程序的架构和原理