微信小程序基础架构浅析

阅读模式 · 发表于 2023-3-8 17:16:45

作者：lisaling，腾讯 IEG 游戏运营工程师。

微信小法式，简称小法式，英文 mini program。是一种不需要下载安装即可在微信中利用的利用，用户扫描小法式码或搜索小法式即可翻开，触手可及，用完即走，不用关心能否安装太多利用的题目。

小法式技术演进

内部开放微信原生才能

微信小法式根本架构浅析-1.jpg

此类 API 最初是供给给腾讯内部一些营业利用，很多内部开辟者发现了以后，依葫芦画瓢天时用了，逐步成为微信中网页开辟的究竟标准。
JS-SDK 公布

2015 年头，微信公布了一整套网页开辟工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、舆图、付出、分享、卡券等几十个 API。让一切开辟者都可以利用到微信的原生才能。

微信小法式根本架构浅析-2.jpg

JS-SDK 处理了移动网页利用微信才能不敷的题目，经过表露微信的接口使得 Web 开辟者可以具有更多的才能，但是在更多的才能之外，JS-SDK 的形式并没有处理利用移动网页碰到的体验不良的题目。
JS-SDK 的不敷

用户在拜候网页的时辰，在阅读器起头显现之前城市有一个白瓢鼬程，在移动端，受限于装备性能和收集速度，白屏会加倍明显。除了白屏，影响 Web 体验的题目还有缺少操纵的反应，首要表示在两个方面：页面切换的僵硬和点击的迟滞感。

微信小法式根本架构浅析-3.jpg

此外一些开辟者会利用 JS-SDK 做一些，比如假红包，捏造的官方活动等。并操纵 JS-SDK 的分享才能变相的去裂变分享到各个群大概朋友圈，由于 JS-SDK 是按照域名来赋予 api 权限的，运营职员封了一个域名后，他们立马用此外域名又继续做坏，要晓得注册一个新的域名的本钱是很低的。

微信小法式根本架构浅析-4.jpg

那末小法式是经过怎样的设想来改良 JS-SDK 的体验和管控上的不敷？
小法式双线程架构

具体实现上小法式采用了类 web + 离线包的形式。开辟上与 web 类似，门坎较低，开辟效力较高。 离线下载和页面预衬着功用增强了用户体验，提升了加载速度，处理了 JS-SDK 加载白屏的题目 1。小法式供给了云端更新离线包的功用，可静态更新页面，相对于 app 的更新和公布更加灵活。此外，小法式在离线包的根本上对切换动画停止优化，下降了切换页面致使的迟滞感，减缓了切换不流利的题目 2。

微信小法式根本架构浅析-5.jpg

小法式在架构方面最大的特点是采用了双线程的开辟形式，隔离了 JS 逻辑和 UI 衬着。小法式的衬着层和逻辑层别离由 2 个线程治理：衬着层的界面利用了 WebView 停止衬着，逻辑层采用 JsCore 线程运转 JS 剧本。
逻辑层：建立一个零丁的线程去履行 JavaScript，在这个情况下履行的都是有关小法式营业逻辑的代码； 衬着层：界面衬着相关的使命全都在 WebView 线程里履行，经过逻辑层代码去控制衬着哪些界面。一个小法式存在多个界面，所以衬着层存在多个 WebView 线程；通讯：这两个线程的通讯会经过微信客户端（下文中也会采用 Native 来代指微信客户端）做直达，逻辑层发送收集请求也经过 Native 转发，小法式的通讯模子下图所示。

微信小法式根本架构浅析-6.jpg

JS 逻辑层运转在 JSCore 中，并没有一个完整阅读器工具，因此缺少相关的 DOM API 和 BOM API，没法操纵页面元素，能到达管控的目标，但也限制了开辟者的权限：

不答应开辟者把页面跳转到其他在线网页
不答应开辟者间接拜候 DOM
不答应开辟者随意利用 window 上的某些未知的能够有危险的 API

这样的逻辑层与 UI 层的隔离，加上小法式的考核和告发机制，使得微信增强对小法式的管控，处理了题目 3。但这也使得开辟者没法灵活的停止页面衬着。
小法式页面衬着

上面已经说了逻辑层没法操纵 DOM 变更，那小法式是若何停止页面的衬着呢？小法式基于数据驱动的架构形式，基于 Virtual Dom（React 引入，实在 DOM 的一种 JS 描写方式）的概念，营业侧只需要改变数据即可引发界面变化。其中衬着层供给了带稀有据绑定语法的 WXML，逻辑层供给了 setData 等等 API，开辟者需要停止界面变化时，只需要经过在逻辑层履行 setData 把变化的数据经过 Native 层传递到衬着层，小法式会停止 Dom Diff（DOM 结构对照并停止最小化变更的算法）等流程，最初把正确的成果更新在 Dom 树上。

微信小法式根本架构浅析-7.jpg

完整的通讯流程大致以下：

逻辑层挪用宿主情况的 setData 方式。
逻辑层将待传输数据转换成字符串，并拼接到特定的 JS 剧本，最初将数据传输到衬着层。
衬着层接收到后，WebView JS 线程会对剧本停止编译，获得待更新数据落后入衬着行列，期待 WebView 线程余暇时停止页面衬着。
WebView 线程起头履行衬着时，待更新数据会合并到视图层保存的原始 data 数据，并将新数据套用在 WXML 片断中获得新的虚拟节点树。经过新虚拟节点树与当前节点树的 diff 对照，将差别部分更新到 UI 视图。同时将新的节点树替换旧节点树，用于下一次重衬着。

小法式计划与 React Native 对照

那末小法式与现有的夹杂开辟技术范例的异同点在哪？特别是与 React Native 的区分，小法式技术架构为什么没有益用 React Native?
夹杂开辟技术范例

现有的夹杂开辟范例，基于 UI 衬着的分类来看，首要有两类：

基于 WebView UI 的根本计划。市道上支流，例如微信 JS-SDK，经过 JSBridge 完成 H5 和 Native 的双向通讯，从而赋予 H5 一定的原生才能。
基于 Native UI 的计划，例如 React-Native、Weex、Flutter 等。在赋予 H5 原生 API 才能的根本上，进一步经过 JSBridge 将 JS 剖析成虚拟 DOM 传递到 Native，并利用原生衬着。

小法式也属于范例 1，本次我们首要以范例 2 中的 React Native 作为对照分析。
React Native 技术架构

框架

React Native 框架首要有三层：

JS 层：该层供给了各类供开辟者利用的组件以及一些工具库（事务分发等）。
C++层：首要处置 java/OC 与 JS 的通讯（JSBridge）以及履行 JavaScript（JS 剧本引擎）。
Native 层（Object C/Java 层）：首要包括 UI 衬着器、收集通讯等工具库。按照分歧操纵系统有分歧的实现。

UI 衬着

React Native 基于 react 框架(Virtual Dom)来停止 UI 衬着，具体的流程大致以下：

首先 JS 层经过 JSX 编写的 Virtual Dom 来构建 Component
Native 层将其转成实在 DOM 插入到原生 App 的页面中。
当有变更，经过 diff 算法天生差别工具
终极由 Native 层将差别工具利用到原生 App 的页面元素上。

通讯

React Native 基于 JSCore 实现 js 与 java/oc 交互，具体流程大致以下：

把 JSX 代码剖析成 javaScript 代码
读取 JS 文件，并操纵操纵 JS 剧本引擎履行
返回一个数组，数组中会描写 OC/Java 工具，描写工具属性和所需要履行的方式，这样就能让这个工具设备属性，而且挪用方式。

React Native 优弱点

上风

原生衬着，性能更好，用户体验较好；
React 生态较好，对前端开辟友爱；
hybrid 技术跨平台开辟，本钱及难度低于原生；
可热更新，可以方便迭代。

优势

支持的款式是 CSS 的子集，会满足不了 Web 开辟者日渐增加的需求；
现有才能下还存在的一些不稳定题目，比如性能、Bug 等；
把衬着工作全都交由客户端原生衬着，会有更接近原生的体验，但现实上一些简单的界面元素利用 Web 技术衬着完万能胜任；
React Native 之前爆出了一个开源协议题目（Facebook BSD+Patents ，大致内容是利用基于 Facebook BSD+Patents 协议的开源项目的开辟者，未来如果由于专利题目与 Facebook 发生胶葛，那末 Facebook 将有权停止你利用该开源项目），这对于以后也是存在隐患的。

小法式不挑选 React Native 缘由

据小法式开辟职员奉告的缘由以下：

React Native 只支持 CSS 的子集，作为一个开放的生态，需要奉告开辟者哪些 CSS 属性能用，哪些不能用，这样的开辟体验较差；（对应上面的优势 1）
React Native 自己存在一些题目，这些依靠 RN 的修复，同时这样就酿成过分依靠客户端发版本去处理开辟者何处的 Bug，修复周期太长。（对应上面的优势 2）
React Native 前阵子还搞出了一个开源协议题目，来说也是存在隐患的。（对应上面的优势 4）

小法式与 React Native 不异点

都具有 hybrid 技术的优点：接近原生的体验，跨平台开辟
利用 Web 相关技术框架来编写营业代码，React Native 为 React 框架，小法式为小法式开辟框架。
各自实现了跨说话通讯计划完成 Native(Java/Objective-c/…)端与 JavaScript(小法式中为衬着层和逻辑层)的通讯

小法式与 React Native 分歧点

小法式利用阅读器内核 WebView 来衬着界面(小部分原生组件由客户端介入衬着)，界面首要由成熟的 Web 技术衬着，辅之大量的接口供给丰富的客户端原生才能，而 React Native 是客户端原生衬着。理论上 React Native 相对于 WebView 的性能更好，但小法式的类 web 开辟对开辟来说入门相对简单，像是一种开辟效力与性能的双刃剑。
小法式开辟留意事项

基于上面的架构分析，我们在开辟中需要留意是：

避免利用操纵操纵 DOM 的 npm 包。由于逻辑层和衬着层隔离，逻辑层没法操纵 DOM/BOM API，所以需要利用 DOM/BOM API 相关的 npm 包和库中不成利用。
避免频仍挪用setData。由于setData中的数据不但需要经过 Native 层传递到衬着层，经过 DOM diff 算法等衬着成终极页面，所以需要只管削减setData的利用以避免性能题目。
避免setData传递大量的新数据。数据的传输会履历跨线程传输和剧本编译的进程，当数据量过大，会增加剧本编译的履行时候，占用 WebView JS 线程，从而影响到终极的衬着性能。

参考文档

小法式官方文档
小法式道理及 RN 与 Flutter 的对照
React-Native 与小法式的底层框架比力
多端小法式道理分析
小法式架构设想(一)
小法式架构设想(二)

腾讯技术交换群已建立，交换会商可加QQ 群：160315980（备注腾讯技术），微信交换群加：teg_helper。

		自动登录	找回密码
密码			立即注册


	选中篇: 置顶\|

选中 篇:

微信小程序基础架构浅析

说点什么

神回复

选中篇: