微信小程序底层框架实现原理｜万字长文（一）-阿里云开发者社区

前言

最近在掘金上学习了一本小册——《微信小程序底层框架实现原理》，加上以前做微信小程序的经验，结合自己的工作经历，深有感触，借此机会和大家分享一下学习工作心得。

2017 年 1 月微信小程序正式发布。

我从2018年接触学习前端时，曾仿写过一个性格评测类小程序demo，后来实习期间，完成了部门首个真正意义上小程序。做毕业设计时，结合微信小程序云开发能力，做了一个问答小程序（类似百度知道，360问答）。后来，做过一个大学信息资讯类小程序。正式工作之后，做过的小程序就很多了，借款类小程序，购物类小程序，消费类小程序，导流类小程序。

为什么要掌握小程序

有招聘需求，现在部分团队会有专门招聘小程序开发工程师，toC的产品招聘前端一般也会要求掌握微信小程序，有相关小程序开发经验。

于开发者

目前开发的项目是小程序
想自己独立开发一个小程序
多掌握一门技术是好的

于企业

app 开发迭代成本较高，对于新业务小程序可以快速试错，探索渠道
web端的生态不完整，收益小（游戏，抖音小程序，虎牙小程序，支付宝小程序）

双线程架构

小程序与传统web单线程架构相比，是双线程架构。

渲染层和逻辑层由两个线程管理，逻辑层采用JSCore运行js代码，渲染层使用 webview 进行渲染。小程序有多个页面，所以渲染层存在多个webview。

两个线程之间由Native 层之间统一处理，无论是线程之间的通信，还是数据的传递，网络请求都是由Native层做转发。

此处提到的小程序都特指微信小程序

渲染一个hello world页面

// index.wxml
<view>{{ msg }}</view>
// index.js
Page({
  onLoad: function () {
    this.setData({ msg: 'Hello World' })
  }
})

渲染层和数据相关。
逻辑层负责产生、处理数据。
逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

数据驱动

WXML可以先转成JS对象，然后再渲染出真正的Dom树，回到“Hello World”那个例子，我们可以看到转换的过程

通过setData把msg数据从“Hello World”变成“Goodbye”，产生的JS对象对应的节点就会发生变化，此时可以对比前后两个JS对象得到变化的部分，然后把这个差异应用到原来的Dom树上，从而达到更新UI的目的，这就是“数据驱动”。

这一点和vue其实是一致的

既然小程序是基于双线程模型，那就意味着任何数据传递都是线程间的通信，也就是都会有一定的延时。

一切都是异步。

快速渲染设计原理

小程序采用多个webview渲染，更加接近原生App的用户体验。

如果为单页面应用，单独打开一个页面，需要先卸载当前页面结构，并重新渲染。

多页面应用，新页面直接滑动出来并且覆盖在旧页面上即可。这样用户体验非常好。

数量限制

页面得载入是通过创建并插入webview 来实现的。

微信小程序做了限制，在微信小程序中打开的页面不能超过10个，达到10个页面后，就不能再打开新的页面。

所以我们在开发中，要避免路由嵌套太深。

PageFrame

我们在写小程序页面时，并不关心webview，只需要写页面ui和逻辑即可。

我们通过调试微信开发工具，可以看到，有两个webview。

一个加载的的是当前页面，加载地址和当前页面路径一致。

一个是instanceframe.html。

微信小程序在初始化的时候，除了渲染首页之后，会帮我们提前额外的预加载一个webview,微信起名为instanceframe.html，用来新渲染webview的模板。

我们通过微信开发者工具打开调试，打开这个 instanceframe.html

document.getElementsByTagName('webview')[1].showDevTools(true, null)

下图是pageframe/instanceframe.html的模板

pageFrame的html结构中注入的js资源

./dev/wxconfig.js

小程序默认总配置项，包括用户自定义与系统默认的整合结果。在控制台输入__wxConfig可以看出打印结果

./dev/devtoolsconfig.js

小程序开发者配置，包括navigationBarHeight,标题栏的高度，状态栏高度，等等，控制台输入__devtoolsconfig可以看到其对应的信息

./dev/deviceinfo.js

设备信息，包含尺寸/像素点pixelRatio

dev/jsdebug.js

debug工具

./dev/WAWebview.js

渲染层底层基础库

./dev/hls.js

优秀的视频流处理工具

./dev/WARemoteDebug.js

底层基础库调试工具

注释占位符，整个页面的json wxss wxml编译之后都存储在这里，当前是一个预设的html模版，所以是空的

wxappcode.js

我们按同样的调试方法，去找到首页的wxappcode.js结构，简单说明下

var decodeJsonPathName = decodeURI("pages/index/index")
__wxAppCode__[decodeJsonPathName + ".json"]={"usingComponents":{}}
var decodeWxmlPathName = decodeURI("pages/index/index")
__wxAppCode__[decodeWxmlPathName + ".wxml"]=$gwx("./" + decodeWxmlPathName + ".wxml")
var decodeWxssPathName = decodeURI("pages/index/index")
__wxAppCode__[decodeWxssPathName + ".wxss"]=((window.eval || __global.__hackEval)('setCssToHead([\x22.\x22,[1],\x22test{ height: calc(\x22,[0,100],\x22-2px); ;wxcs_style_height : calc(100rpx-2px); width: \x22,[0,200],\x22; ;wxcs_style_width : 200rpx; ;wxcs_originclass: .test;;wxcs_fileinfo: ./pages/index/index.wxss 2 1; }\n\x22,],undefined,{path:\x22./pages/index/index.wxss\x22})'));
window.__mainPageFrameReady__ && window.__mainPageFrameReady__()

文件包含了所有文件的编译路径

主要几个重要的函数和属性有

decodeJsonPathName
.json配置
.wxml编译后的$gwx函数。
.wxss编译后的eval函数。

后两个函数我们会在后文展开分析。

当小程序需要打开某个页面的时候，只需要提取页面的者几个属性，注入到预加载的html模版中就可以快速生成一个新的webview

快速启动

在视图层内，每个页面都是一个webiew，当小程序启动时只有首页一个webview

执行wx.navigateTo新开一个页面的时候，就会创建一个新的webview并插入到视图层

wx.navigateBack则为销毁webview

小程序每个视图层页面内容都是通过pageframe.html模板来生成的。

首页启动时，即第一次通过pageframe.html生成内容后，后台服务会缓存pageframe.html模板首次生成的html内容
非首次新打开页面时，页面请求的pageframe.html内容直接走后台缓存
非首次新打开页面时，pageframe.html页面引入的外链js资源走本地缓存

这样在后续新打开页面时，都会走缓存的pageframe的内容，避免重复生成，快速打开一个新页面。

首次打开新页面

启动一个webview，src为空地址http://127.0.0.1:${global.proxyPort}/aboutblank?${c}
webview 初始化完毕后，设置地址src 为pageframe.html，开始加载注入的预设样式和预设js 代码
pageframe.html在dom ready之后，触发注入并执行具体页面的相关代码

下图代码中可以看到dom加载完毕之后，触发alert 通知

此时通过history.pushState方法修改webview的src但是webview并不会发送页面请求。
因此webview 路径变化为

正好对应webview 加载过程

wxml 设计思路

网页编程一般采用的是HTML + CSS + JS的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

小程序自行搭建了组件组织框架Exparser框架

Exparser的组件模型与WebComponents标准中的ShadowDOM高度相似

如下代码，我们定义在wxml中

<!--index.wxml-->
<view class="container">
  Weixin
  <text style="position:relative;">文本</text>
</view>
<button bindtap="test">按钮</button>

Exparser框架会将上述结构转换为下面这个样子

<wx-view exparser:info-class-prefix="" exparser:info-component-id="2" class="container">
  Weixin
  <wx-text exparser:info-class-prefix="" exparser:info-component-id="3" style="position:relative;">
    <span style="display:none;">文本</span>
    <span>文本</span></wx-text>
</wx-view>
<wx-button exparser:info-class-prefix="" exparser:info-component-id="4" exparser:info-attr-bindtap="test" role="button" aria-disabled="false">
  按钮
</wx-button>

这样看的话是不是和WebComponents一样了，但是小程序并没有直接使用WebComponents，而是自行搭建了组件框架Exparser。

WebComponents

Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装、可重用的HTML 标记。不用加载任何外部模块，直接就可以在浏览器中跑。

如下代码，标签就是自定义组件的标签了，它不属于html语义化标签中的任何一个，是自定义的。

<html>
<head>
</head>
<body>
<user-card></user-card>
<template id='userCardId'>
  <!--组件的样式与代码封装在一起，只对自定义元素生效，不会影响外部的全局样式。-->
  <style>
    .name{
        color:red;
        font-size: 50px;
    }
    button{
        width:200px;
    }  
  </style>
  <p class='name'>21312</p>
  <button>test</button>
</template>
<script>
  class UserCard extends HTMLElement {
    constructor() {
      super()
      var shadow = this.attachShadow({ mode:'closed'});
      var templateElem = document.getElementById('userCardId')
      var content = templateElem.content.cloneNode(true)
      // this.appendChild(content)
      shadow.appendChild(content)
    }
  }
  window.customElements.define('user-card', UserCard)
</script>
</body>
</html>

WebComponent主要就是三个规范：

Custom Elements规范

可以创建一个自定义标签。根据规范，自定义元素的名称必须包含连词线”-“，用与区别原生的 HTML 元素。

可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用。

templates规范

提供了<template>标签，可以在它里面使用HTML定义DOM结构。

Shadow DOM规范

下图中，看一下右侧的HTML结构，我们可以展开标记看到里面的结构。是不是有种白封装了的感觉。如果只有这样的效果的话，跟模板引擎渲染组件的效果是一样的。所以我们不希望用户能够看到的内部代码，WebComponent 允许内部代码隐藏起来，这叫做 Shadow DOM，即这部分 DOM 默认与外部 DOM 隔离，内部任何代码都无法影响外部。

ShadowDOM

首先实例化一个根节点，挂载到宿主上，这里的宿主是this。上面说过，this指向user-card。

然后我们把创建的DOM结构，或者<template>结构挂载到影子根上即可。看一下HTML结构展示。

var shadow = this.attachShadow({ mode:'closed'});
shadow.appendChild(content)

内置的控件元素不能成为宿主，比如：img、button、input、textarea、select、radio、checkbox，video等等，因为他们已经是 #shadow-root

如果愿意的话，我们可以调试他们的shadow，看看这些标签的真实结构

Exparser框架原理

Exparser是微信小程序的组件组织框架，内置在小程序基础库中，为小程序提供各种各样的组件支撑。

内置组件和自定义组件都有Exparser组织管理。

Exparser的组件模型与WebComponents标准中的Shadow DOM高度相似。

Exparser会维护整个页面的节点树相关信息，包括节点的属性、事件绑定等，相当于一个简化版的Shadow DOM实现。Exparser的主要特点包括以下几点：

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

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

原生组件

小程序中的部分组件是由客户端创建的原生组件，并不完全在Exparser的渲染体系下，这些组件有：

camera
canvas
input（仅在 focus 时表现为原生组件）
live-player
live-pusher
map
textarea
video

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

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

特殊场景

如果业务场景为手势识别之类的，监听事件不断的触发，数据不断的改变。

这样的业务场景中，我们可以想像，如果坐标值不断改变的话，在逻辑与视图分开的双线程架构中，线程与线程之间的通讯是非常频繁的，会有很大的性能问题。

所以我们可以看到微信开放了一个标记，可以在渲染层写部分js逻辑。这样话就可以在渲染层单独处理频繁改变的数据，就避免了线程与线程之间频繁通讯导致的性能和延时问题。

优势

WXML模版语法经过转换之后，会已自定义元素的形式来渲染。这里会有个疑问🤔️，为什么不用HTML语法和WebComponents来实现渲染，而是选择自定义？

管控与安全：web技术可以通过脚本获取修改页面敏感内容或者随意跳转其它页面
能力有限：会限制小程序的表现形式
标签众多：增加理解成本

微信小程序底层框架实现原理｜万字长文（一）

前言

为什么要掌握小程序

于开发者

于企业

双线程架构

渲染一个hello world页面

数据驱动

快速渲染设计原理

数量限制

PageFrame

pageFrame的html结构中注入的js资源

wxappcode.js

快速启动

首次打开新页面

wxml 设计思路

WebComponents

ShadowDOM

Exparser框架原理

原生组件

特殊场景

优势

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微信小程序底层框架实现原理｜万字长文（一）

前言

为什么要掌握小程序

于开发者

于企业

双线程架构

渲染一个hello world页面

数据驱动

快速渲染设计原理

数量限制

PageFrame

pageFrame的html结构中注入的js资源

wxappcode.js

快速启动

首次打开新页面

wxml 设计思路

WebComponents

ShadowDOM

Exparser框架原理

原生组件

特殊场景

优势

热门文章

最新文章

相关课程

相关电子书

相关实验场景