微信小程序开发自学笔记 —— 六、底层框架

底层框架

双线程模型

小程序是基于双线程模型的，在这个模型中，小程序的逻辑层和渲染层分开在不同的线程运行，与传统的 Web 单线程模型有很大的不同。

技术选型

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

1. 用纯客户端原生技术来渲染
2. 用纯Web技术来渲染
3. 结余客户端原生技术与Web技术之间的，互相结合各自特点的技术（统称Hybrid技术）来渲染

小程序选择类似于微信JSSDK这样的Hybrid技术，即界面主要由成熟的Web技术渲染，辅之以大量的接口提供丰富的客户端原生能力。同时，每个小程序页面都是用不同的WebView去渲染，这样可以提供更好的交互体验，更贴近原生体验，也避免了单个WebView的任务过于繁重。

管控与安全

得益于客户端系统有JavaScript 的解释引擎（在iOS下是用内置的 JavaScriptCore框架，在安卓则是用腾讯x5内核提供的JsCore环境），我们可以创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，也就是逻辑层。而界面渲染相关的任务全都在WebView线程里执行，通过逻辑层代码去控制渲染哪些界面，那么这一层当然就是所谓的渲染层。这就是小程序双线程模型的由来。

天生的延时

小程序基于双线程模型，任何数据传递都是线程间的通信，也就是会有一定的延时。除此之外，各层与客户端原生交互同样是有延时的。

组件系统

小程序里设计了一套组件框架 —— Exparser。基于这个框架，内置了一套组件，以涵盖小程序的基础功能，便于开发者快速搭建出任何界面。

同时也提供了自定义组件的能力，开发者可以自行扩展更多的组件，实现代码复用。

Exparser框架

Exparser是微信小程序的组件组织框架，内置在小程序基础库中，为小程序的各种组件提供基础的支持。小程序内的所有组件，包括内置组件和自定义组件，都由Exparser组织管理。

Exparser的主要特点包括以下几点：

1. 基于Shadow DOM模型：模型上与WebComponents的ShadowDOM高度相似，但不依赖浏览器的原生支持，也没有其他依赖库；实现时，还针对性地增加了其他API以支持小程序组件编程。
2. 可在纯JS环境中运行：这意味着逻辑层也具有一定的组件树组织能力。
3. 高效轻量：性能表现好，在组件实例极多的环境下表现尤其优异，同时代码尺寸也较小。

小程序中，所有节点树相关的操作都依赖于Exparser，包括WXML到页面最终节点树的构建、createSelectorQuery调用和自定义组件特性等。

内置组件

基于Exparser框架，内置了一套组件，提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。有了这么丰富的组件，再配合WXSS，可以搭建出任何效果的界面。在功能层面上，也满足绝大部分需求。

自定义组件

自定义组件是开发者可以自行扩充的组件。开发者可以将常用的节点树结构提取成自定义组件，实现代码复用。

1.ShadowTree的概念

2.运行原理

3.组件间通信

原生组件

在内置组件中，有一些组件较为特殊，它们并不完全在Exparser的渲染体系下，而是由客户端原生参与组件的渲染，这类组件我们称为“原生组件”,这也是小程序Hybrid技术的一个应用。

原生组件运行机制

原生组件在WebView这一层的渲染任务是很简单，只需要渲染一个占位元素，之后客户端在这块占位元素之上叠了一层原生界面。因此，原生组件的层级会比所有在WebView层渲染的普通组件要高。

引入原生组件主要有3个好处：

1. 扩展Web的能力。比如像输入框组件（input, textarea）有更好地控制键盘的能力。
2. 体验更好，同时也减轻WebView的渲染工作。比如像地图组件（map）这类较复杂的组件，其渲染工作不占用WebView线程，而交给更高效的客户端原生处理。
3. 绕过setData、数据通信和重渲染流程，使渲染性能更好。比如像画布组件（canvas）可直接用一套丰富的绘图接口进行绘制。

常用的几个原生组件

组件名	名称	**是否有**context	描述
video	视频	是	播放视频
map	地图	是	展示地图
canvas	画布	是	提供一个可以自由绘图的区域
picker	弹出式选择器	否	初始时没有界面，点击时弹出选择器

原生组件渲染限制

原生组件脱离在WebView渲染流程外，这带来了一些限制。最主要的限制是一些CSS样式无法应用于原生组件。

小程序与客户端通信原理

视图层组件

这层通信机制在 iOS 和安卓系统的实现方式并不一样，iOS 是利用了WKWebView 的提供 messageHandlers 特性，而在安卓则是往 WebView 的 window 对象注入一个原生方法，最终会封装成 WeiXinJSBridge 这样一个兼容层，主要提供了调用（invoke）和监听（on）这两种方法。

逻辑层接口

逻辑层与客户端原生通信机制与渲染层类似，不同在于，iOS平台可以往JavaScripCore框架注入一个全局的原生方法，而安卓方面则是跟渲染层一致的。