微信小程序底层框架实现原理

双线程架构

是什么？

衬着层与逻辑层别离由两个线程治理，两个线程之间由 Native 层停止同一处置

• 衬着层的界面利用 webview 停止衬着。
  
• 多个页面临应多个 webview（最多 10 个）
  
• 逻辑层采用 JSCore 运转 JavaScript 代码
  
• 只要一个 APP 实例，一切 JS 都在一个线程中履行
  

对照单线程的上风

• 避免单线程中，由于资本加载而阻塞页面剖析
  
• 将微信 SDK、底层根本库等放在 Native 层中，削减利用的包体积和收集请求数目
  

若何处理 H5 的平安题目

• 禁用部分 JS 操纵：如获得 DOM、静态履行 JS 代码等
  
• 为 JS 供给沙箱情况
  

为什么需要供给 WXS

双线程架构中，频仍的跨线程通讯（如手势识别等）会带来性能题目。
WXS 可以在衬着层中写部分逻辑，在衬着层零丁处置部分频仍改变的数据
PageFrame

处理的题目

每个页面都是一个自力的 webview，其中包括大量内容。小法式若何快速新建并翻开页面
道理

作为一个模板，其中援用了各类通用资本 js，当屡次利用 PageFrame 建立页面时，这些自资本会利用当地缓存。
启动一个页面的步调：

• 启动一个 webview
  
• 在其中初始化根本库，以及一些根本库的内部优化
  
• 注入 WXML 和 WXSS，小法式能在接收到页面初始数据以后顿时起头衬着
  

Exparser

Exparser 是小法式的组件构造框架，根基参考 Shadow DOM 模子实现。
Shadow DOM 是 WebComponents 中的概念，它答应将隐藏的 DOM 结构附加到常规的 DOM 树中。可以挑选外界能否能获得内部结构。
一些 HTML 标签是阅读器内置的 ShadowDOM 组件，如 video、button 等。这些组件不能作为 ShadowDOM 的宿主元素。
Shadow DOM 中的事务，可以挑选能否冒泡至宿主元素内部
WXSS

和 css 的区分

• 新增了 rpx 单元，换算方式为屏幕宽度为 375px 时，1px = 2rpx
  
• 仅支持部分挑选器
  

编译方式

WXSS 文件不在 webview 中衬着，而是提早编译为 js。 在该 js 中，会获得装备信息（屏幕宽度等），并以此将 rpx 转换为现实像素。 该 js 内容会经过 eval 停止履行，并终极天生 style 标签插入到页面中。
WXML 的编译：Virtual DOM

WXML 代码也会编译为 JS，天生一个 $gwx 函数，它用于天生虚拟 DOM。
$gwx 的返回值也是一个函数 generateFun， generateFun 接管模板衬着所需的静态数据，其返回值是虚拟 DOM 树。
事务通讯系统

通讯机制

• 衬着层和逻辑层的通讯都是经过 Native 层转发
  
• iOS 是操纵了 WKWebView 的供给 messageHandlers 特征
  
• 安卓是往 WebView 的 window 工具注入一个原生方式
  
• 在微信中封装为 WeiXinJSBridge 作为兼容层
  
• 在开辟者工具中则是用 Websocket 对通讯方式停止模拟
  

绑定事务

标签的一切 attribute 城市存在虚拟 DOM 的 attr 属性中，经过正则判定某个属性能否是绑定的事务，找失事务后为节点注册事务。
小法式的事务都是和 HTML 原闹事务对应的（如 tap 对应 mouseup），终极会经过 window.addEventListener 增加原闹事务的监听
触发事务

衬着层中，会拼接事务的 event 参数，建立一个 exparser 事务并触发，经过 sendData 向逻辑层通讯
数据在两个线程中的传递

页面加载时，data 中的数据会以 JSON 字符串的形式传至衬着层。是以，data 中的数据必须是可以转为 JSON 的范例

字符串，数字，布尔值，工具，数组

小法式框架

预编译

自己界说一套 DSL（语律例则），一般对应 React 或 Vue，经过源码的 AST 剖析复原为微信小法式原生代码的形式
范围性：

• React 或 Vue 出了新的语法，要兼容的话要扩大 DSL
  
• 兼容题目，小法式不支持的属性，没法编译
  

半编译半运转时：mpvue

基于类 vue 语法

• 将 template 编译为 wxml
  
• 在 vue 的 patch 流程中，不更新 DOM，而是触发 setData 来更新视图
  

纯运转时框架：remax

纯运转时框架要处理的题目

React / Vue 的视图更新都是基于 DOM API 的，但小法式的逻辑层并未供给任何操纵节点的 API。
唯一的更新视图的方式，就是 setData。
处理思绪：静态 template

WXML 供给模板（template），可以在模板中界说代码片断，然后在分歧的地方挪用。
利用模板时，经过 is 属性决议要利用的模板是哪一个。而 is 属性的取值可以用双括号语法从而利用 data 中的数据。
是以，实现的思绪就是：

• 在 data 中实现一个类似虚拟 DOM 的工具，经过递归的形式在 WXML 中将其衬着为 template
  
• 更新 DOM 的流程，改成变动这个虚拟 DOM 工具，经过 setData 触发视图更新