微信小程序底层框架实现原理|万字长文(一)

简介: 微信小程序底层框架实现原理|万字长文

前言

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

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

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

为什么要掌握小程序

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

于开发者

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

于企业

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

双线程架构

1686893724150.jpg

小程序与传统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”那个例子,我们可以看到转换的过程

1686893755863.jpg

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

这一点和vue其实是一致的


1686893772183.jpg

1686893772183.jpg

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

一切都是异步。

快速渲染设计原理

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

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

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

数量限制

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

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

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

PageFrame

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

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

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

一个是instanceframe.html。

1686893790111.jpg

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

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

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

下图是pageframe/instanceframe.html的模板

image.jpeg

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

  • ./dev/wxconfig.js

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

1686893828359.jpg

  • ./dev/devtoolsconfig.js

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

1686893840512.jpg

  • ./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 通知

1686893873718.jpg

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


1686893891018.jpg

1686893891018.jpg

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 隔离,内部任何代码都无法影响外部。

1686893963878.jpg

ShadowDOM

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

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

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

1686894001180.jpg

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

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


1686894015540.jpg

1686894015540.jpg

Exparser框架原理

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

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

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

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

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

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

原生组件

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

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

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

特殊场景

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

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

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

优势

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

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


相关文章
|
1月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
253 60
|
2月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
152 65
|
4月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架,它主要分为两大部分:页面视图层(View)和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
49 0
|
2月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
3月前
|
移动开发 开发框架 前端开发
微信门户开发框架-使用指导说明书(2)--基于框架的开发过程
微信门户开发框架-使用指导说明书(2)--基于框架的开发过程
|
3月前
|
存储 开发框架 小程序
微信门户开发框架-使用指导说明书
微信门户开发框架-使用指导说明书
|
3月前
|
开发框架 前端开发 JavaScript
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
|
3月前
|
开发框架 移动开发 前端开发
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
|
3月前
|
开发框架 前端开发 JavaScript
在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作
在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作
|
4月前
|
小程序 开发者 Windows
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
109 1