小程式底層架構

與瀏覽器對比

以微信小程式為例，與瀏覽器中的對應關系：

js 開發邏輯代碼 -> js -> v8
wxss （多了rpx單位）控制樣式 -> css -> 瀏覽器渲染器
wxml xml語言控制渲染層展示 -> html -> 瀏覽器渲染器 -> dom

瀏覽器

單執行緒存在阻塞

小程式

雙執行緒架構
- js 邏輯層
- wxml、wxss 視圖層
JSBridge 通信（可以實作相機、掃碼）

在這里插入圖片描述

微信小程式初級架構

所有的邏輯代碼會打成一份，一個小程式只有一個邏輯層，包含所有頁面邏輯 js
視圖層（渲染層）一個頁面對應一個 Webview，小程式中頁面堆疊最多十層，
- webview 用來渲染 wxml 和 wxss
  - 在本地開發工具，直接用 iframe
  - 在客戶端，用真的 webview

在這里插入圖片描述

小程式運行環境

運行環境	邏輯層	渲染層
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制內核
小程式開發者工具	NWJS	Chrome WebView

nw：node（io/網路/資源處理/js）-webkit（html/css）

底層實作（基礎庫）

基礎庫：對底層運行時的封裝，提供事件、資料變更、通信、基礎函式

底層需要實作的功能：

視圖層和邏輯層的編譯
邏輯層和視圖層之間的通信

查看基礎庫

微信開發工具 -> 執行 openVendor() -> 打開基礎庫

可以看到兩個可執行檔案：

wcc: Wechat WXML Complier wxml 編譯器
wcsc: Wechat WXSS Compiler wxss 編譯器

和基礎庫 xxx.wxvpkg，

基礎庫內容

基礎庫用 wxappUnpacker 反編譯，得到：

WAWebview.js 視圖層引擎

Foundation 基礎模塊
- 提供環境變數 env、isService、isWebview、eventEmit、jsbridge、ready監聽配置
WeixinJSBridge 訊息通信機制
NativeBuffer 轉換資料格式
Reporter 日志系統
exparser 組件系統 Shadow DOM、WebComponent 規范、wx-element
- 提供友好互動的組件 picker、slider、swiper 等
- 承接原生組件 video、canvas 等
- 事件系統
- 注冊組件 window.exparser.registerElement()
__virtualDOM__

WAService.js 邏輯層引擎

Foundation 基礎模塊
- 提供環境變數 env、isService、isWebview、eventEmit、jsbridge、ready監聽配置
WeixinJSBridge 訊息通信機制
路由管理
生命周期管理
__subContextEngine: App、Page、Component getApp
__virtualDOM__：提供 querySelector 方法

編譯器

編譯 wxml

wcc(Wechat WXML Complier) wxml 編譯器 -> js
初始化時：

編譯生成 js，執行 js 生成構建虛擬 dom 的函式
資料傳遞給構建虛擬 dom 的函式，生成 vdom 描述
vdom 描述經過組件系統 exparser 的決議構建真實 dom

資料變更時：

執行上面 2、3 步
dom diff 對比、渲染

wxml 經過 WAWebview 編譯成 js，js + 虛擬 dom -> wxml描述檔案，交給組件系統 exparser，去渲染更新

編譯 wxss

wcsc(Wechat WXSS Compiler) wxss 編譯器 -> js

處理單位 rpx，根據手機物理像素及解析度來計算實際應該為多少
生成新的 style，插入

初始化流程

渲染層

控制臺輸入 document.getElementsByTag('webview')[0] 得到渲染層，

初始化 __webviewId__（標識當前是哪個 webview ）、__wxAppCode__
wcc 生成渲染器方法的代碼（wxml -> js）
加載執行 wcsc 打包出來的代碼（js代碼），生成 css
初始化頁面配置
$gwx -> generateFunc（渲染器，執行生成虛擬 Dom），需要資料

觸發自定義事件，傳遞渲染器函式

 var generateFunc = $gwx(decodeName)
 if(generateFunc) {
   var CE = window.CustomEvent
   document.dispatchEvent(new CE('generateFuncReady', {
     detail: {
       generateFunc: generateFunc
     }
   }))
 } else {
   ...
 }

基礎庫 WAWebview 中監聽了 generateFuncReady 事件，該事件中會觸發 WexinJSBridge，通知邏輯層渲染層已加載完成，等待邏輯層傳資料，邏輯層執行完之后執行 generateFunc 回呼，并拿到邏輯層傳來的資料，生成虛擬 dom
虛擬 dom 描述經過組件系統 exparser 的決議構建真實 dom

邏輯層

控制臺輸入 document 得到邏輯層，

初始化配置項（頁面配置項、全域配置項）
加載邏輯層基礎庫（維護了 Page、App、Component、wx.getSetting、wx.scanCode 等）
維護一個邏輯層渲染器，加載邏輯代碼（開發者寫的代碼）
構建 __wxAppCode__，保存所有頁面的配置和渲染器方法

整體流程圖

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/257427.html

標籤：其他

上一篇：玩轉Linux必備的金鑰匙之原始碼安裝mysql

下一篇：Soul網關（十九）總結02