认识达内从这里开始

我们在上文中给大家简单介绍了小程序开发与普通网页开发之间的一些区别等内容，而今天我们再来来了小程序开发架构包含哪些内容。

1、渲染机制

处于性能和实现的考虑，小程序采用Hybrid渲染机制，这样做有几点好处：

扩展Web的能力。比如像输入框组件(input,textarea)有更好地控制键盘的能力

体验更好，同时也减轻WebView的渲染工作

绕过setData、数据通信和重渲染流程，使渲染性能更好

用客户端原生渲染内置一些复杂组件，可以提供更好的性能

2、架构

原生小程序框架采用双线程模型：视图层和逻辑层完全分离为两个不同的线程。每个页面的渲染在一个webview线程上执行，视图层包含多个webview线程，而逻辑层则统一在JSCore上执行。

这样做的目的是防止逻辑层对Dom和window的操作(如跳转到外部页面)，使整个应用变得安全可控。

逻辑层：创建一个单独的线程去执行JavaScript，在这里执行的都是有关小程序业务逻辑的代码，负责逻辑处理、数据请求、接口调用等

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

JSBridge起到架起上层开发与Native(微信系统)的桥梁，使得小程序可通过API使用原生的功能，且部分组件为原生组件实现，从而有良好体验

3、视图层和逻辑层的通信

双线程模型下，逻辑层代码无法直接操作Dom，逻辑层和视图层的数据传输(setData)是通过两边的evaluateJavaScript实现的。用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份JS脚本，再通过执行JS脚本的形式传递到两边独立环境。

4、小程序多端同构方案

很多企业都有自己的小程序平台，如微信、支付宝、头条等，如今市面上很多产品都是基于React、Vue等框架开发的web应用，但web端代码是不可能运行在小程序平台上的(详见上述小程序和web应用的不同)，而开发几套代码的时间和维护成本又太高，为了节省学习和开发成本，各大公司都推出了自己的多端小程序方案，使开发者可以用React、Vue框架来开发小程序。类似框架有微信的Kbone、阿里的Remax、京东的Taro等。

Taro是在编译时将代码适配到小程序平台，而Kbone和Remax则是在运行时完成这个工作。

以下重点解释Kbone和Remax。

Kbone

参照微信官方文档，Kbone在适配层里模拟出了浏览器环境，让Web端的代码可以不做什么改动便可运行在小程序里。

kbone实现原理是在worker线程适配了一套JSDomAPI，上层不管是哪种前端框架(react、vue)或原生JS终都需要调用JSDomAPI操作dom，适配的JSDomAPI则接管了所有的Dom操作，并在内存中维护了一棵Domtree，所有上层终调用的Dom操作都会更新到这棵Domtree中，每次操作(有节流)后会把Domtree同步到webview线程中，通过wxml自定义组件进行render。

Remax

与Kbone上层支持多种框架(React、Vue、Angular)不同，Remax专门实现React应用向小程序的适配。

Remax实现原理是在worker线程维护一棵虚拟Domtree,这棵虚拟Domtree会通过小程序原生的setData方法映射到render线程，render层再把虚拟Domtree进行遍历然后渲染。

Remax和kbone类似，都是在worker线程维护一棵Domtree，再把这棵Domtree传到render线程进行渲染，的区别是remaxdomtree发生变化时，会计算差异，而不需要把整棵树都传到render线程，此功能是react提供的，就是在diff完后找出差异，则把差异传到render线程

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请在707945861群中学习了解。