實現微信小程式編譯和執行環境系列(核心篇一)

前言

因為一些小夥伴的私信和交流，感覺寫的這些內容對別人還是有一些幫忙，所以打算剩下的幾篇更新頻率會快一些爭取一星期一篇，應該還可以在寫4篇的內容(包含小遊戲和雲開發服務)，可以帶你初步瞭解搭建微信小程式引擎執行環境從頭開始的一些過程

github

核心篇分了幾篇來描述，本文先從整體系統層面來概括小程式執行環境時的架構，明白它的整體大致流程，後面會接著更新細節內容

• 總體架構圖解
• 架構分步詳解
• 啟動流程過程
• 訊息通訊流程
• 訊息處理機制

---

正文

總體架構

先給大家展示一張架構大致圖

可以看出大致的一個層次結構

• 展現層 UI Simulator Layer
• 控制層 Control Layer
• 訊息處理層 Message Handler Layer
• 服務層 Service Layer
• 基礎設施層 Infrastructure Layer
• 本地層 Native Layer
• 作業系統層 OS Layer

---

展現層 UI Simulator Layer

• 小程式的頁面顯示，選單標題等展示內容
• 響應使用者的事件操作

---

控制層 Control Layer

• UI 控制

  • lanuchHome
  • navigateTo
  • redirectTo
  • navigateBack
  • switchTab
  • showShareMenu
  • 其他

• 訊息相互傳輸分發

  • service層 和 service層 間訊息轉發
  • service層 和 webview層 間訊息分發
  • webview層 和 webview層 間訊息分發

• 訊息處理

  • 處理器選擇
  • 處理結果收集

• 訊息快取

---

服務層 Service Layer

• 先處理 Message 訊息，在各層之間相互轉發在返回結果
  • 網路服務 API
  • 儲存服務 API
  • 微信資料服務 API
  • 事件跟蹤服務 API
  • 小程式配置資訊服務 API
  • 渲染狀態服務 API
  • 分享服務 API
  • 檔案操作服務 API
  • 其他

  ---

基礎設施層 Infrastructure Layer

• Log 檔案系統
  • 日誌檔案儲存
• Level DB
  • 資料儲存

---

基本地層 Native Layer

• 本地層主要負責裝置的具體操作
  • 訪問相機
  • 訪問 GPS
  • 訪問通訊錄
  • 訪問相簿
  • 訪問檔案系統
  • 撥號
  • 其他

---

作業系統層 OS Layer

• 主要是執行載體平臺
  • Android
  • IOS

以上就是一個大致的架構層級

---

下面我們在通過一個小程式啟動執行流程來看下，各層架構設計在執行時的細節

還是先給大家看一個圖

從圖中我們看到核心的控制層和socket server服務的互動 ，他就相當於人的中樞運載這各部件相互和諧的工作，下面還是用文字來簡述下整個啟動流程

---

• 啟動流程說明
  • 載入小程式系統配置檔案
  • 建立 APPSERVICE webview
  • 根據配置建立 HOME PAGEFRAME WEBVIEW
  • 通知 Socket Server 路由資訊
  • Socket Server 轉發路由資訊到 APPSERVICE
  • APPSERVICE 通知 HOME PAGEFRAME 渲染
  • HOME PAGEFRAME 通知APPSERVICE 渲染狀態

---

載入小程式系統配置檔案

• 配置資訊
  • APP 資訊
    • appid Tabbar 資訊
      • tabbar 列表
      • tabar 樣式
  • Navigator 資訊
    • navigate 樣式
  • 場景資訊
  • 其他資訊

---

建立 APPSERVICE

• 小程式載入時，先建立 APPSERVICE webview
• APPSERVICE webview 建立完成後
  • 自動連線到 socket server
  • 獲取網路資訊
  • 獲取貼上板資料
  • 其他

---

建立 HOME PAGEFRAME WEBVIEW

• 基於小程式配置，解析主頁路徑
• 建立主頁 Webview，建立完成後
  • 自動動連線到 socket server
  • 釋出 xWebVideoSupported 到 appservice
  • vdSync 到 appservice
  • GenerateFuncReady 到 appservice

---

通知 Socket Server 路由資訊

• Home page webview 建立之前，傳送 onAppRoute 資訊
• Home page webview 建立後，傳送 onAppRouteDone 資訊

---

Socket server 轉發路由資訊

• Socket server轉發控制層資訊到 appservice
  • onAppRoute
  • onAppRouteDone

---

Service 通知 Page 渲染

• Service 以訊息的方式，通知 Page 渲染
  • vdSync - webview 資訊同步
  • vdSyncBatch - webview 頁面選擇
  • invokeWebviewMethod - 通知 webiew 更新

---

Page 通知 Service 渲染狀態

• __DOMReady 訊息

這個算是一個微信小程式啟動經歷的一些過程，只能說參考分析，比較不是開發人員不能準確說做來那些事

可能大家看了上面的內容還是比較模糊，最核心的訊息事件是怎麼處理的，有那些事件是怎麼進行分發的，下面我還是會先來從設計層面先來分析一下

下面還是先看下一個圖（整個的訊息通訊機制）

這個圖如果你們深入研究過這塊內容的應該都可以看懂service webview socket之間的關聯，下面我還是會簡述一下

所有的訊息型別

• APPSERVICE_ON_EVENT
• APPSERVICE_INVOKE
• APPSERVICE_INVOKE_CALLBACK
• APPSERVICE_PUBLISH
• WEBVIEW_ON_INVOKE
• WEBVIEW_ON_INVOKE_CALLBACK
• WEBVIEW_PUBLISH

---

APPSERVICE_ON_EVENT

• 傳送方
  • 控制層
• 接收方
  • APPSERVICE
  • WEBVIEW
• 訊息處理
  • 無特殊處理

---

APPSERVICE_INVOKE

• 傳送方
  • APPSERVICE
• 接收方
  • APPSERVICE
  • WEBVIEW
• 訊息處理
  • 呼叫 API
  • 返回 APPSERVICE_INVOKE_CALLBACK 訊息

---

APPSERVICE_PUBLISH

• 傳送方
  • APPSERVICE
• 接收方
  • WEBVIEW
• 訊息處理
  • 無特殊處理

---

WEBVIEW_ON_INVOKE

• 傳送方
  • WEBVIEW
• 接收方
  • WEBVIEW
• 訊息處理
  • 呼叫 API
  • 返回 WEBVIEW_ON_INVOKE_CALLBACK 訊息

---

WEBVIEW_PUBLISH

• 傳送方
  • WEBVIEW
• 接收方
  • APPSERVICE
• 訊息處理
  • 無特殊處理

---

在微信開發者工具裡面採用的這種無阻塞訊息通訊可以更好的處理這些事件之間的關聯性和靈活性，這種方式具備的特點

• 傳送方可以隨時向 socket server 傳送訊息
• 傳送方可以向任意接收方傳送訊息，無論接收方是否存在
• 接收方可用時，傳送給接收方的訊息可以即時送達
• 訊息不丟失

但在我們手機上面使用的微信小程式，微信肯定不是採用這種方式的，應為這種方式最大的問題就是效率和穩定性，在原生上面應該採用橋接的方式

本來打算放一些案例的，後來發現寫下來都沒有程式碼本篇比較存粹的講解下小程式的架構，希望可以幫大家對小程式執行環境理解帶來一點小小幫助

創作不易 點個贊支援一下就是動力！！

歡迎感謝持續關注！！！