核心篇分了(le／liǎo)幾篇來(lái)描述，本文先從整體系統層面來(lái)概括小程序運行環境時(shí)的(de)架構，明白它的(de)整體大(dà)緻流程，後面會接着更新細節内容

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

總體架構

先給大(dà)家展示一張架構大(dà)緻圖

可以(yǐ)看出(chū)大(dà)緻的(de)一個(gè)層次結構

• 展現層 UI Simulator Layer
• 控制層 Control Layer
• 消息處理層 Message Handler Layer
• 服務層 Service Layer
• 基礎設施層 Infrastructure Layer
• 本地(dì / de)層 Native Layer
• 操作系統層 OS Layer

展現層 UI Simulator Layer

• 小程序的(de)頁面顯示，菜單标題等展示内容
• 響應用戶的(de)事件操作

控制層 Control Layer

• UI 控制
  • lanuchHome
  • navigateTo
  • redirectTo
  • navigateBack
  • switchTab
  • showShareMenu
  • 其他(tā)
• 消息相互傳輸分發
  • service 層 和(hé / huò) service 層 間消息轉發
  • service 層 和(hé / huò) webview 層 間消息分發
  • webview 層 和(hé / huò) webview 層 間消息分發
• 消息處理
  • 處理器選擇
  • 處理結果收集
• 消息緩存

服務層 Service Layer

• 先處理 Message 消息，在(zài)各層之(zhī)間相互轉發在(zài)返回結果
  • 網絡服務 API
  • 存儲服務 API
  • 微信數據服務 API
  • 事件跟蹤服務 API
  • 小程序配置信息服務 API
  • 渲染狀态服務 API
  • 分享服務 API
  • 文件操作服務 API
  • 其他(tā)

基礎設施層 Infrastructure Layer

• Log 文件系統
  • 日志文件存儲
• Level DB
  • 數據存儲

基本地(dì / de)層 Native Layer

• 本地(dì / de)層主要(yào / yāo)負責設備的(de)具體操作
  • 訪問相機
  • 訪問 GPS
  • 訪問通訊錄
  • 訪問相冊
  • 訪問文件系統
  • 撥号
  • 其他(tā)

操作系統層 OS Layer

• 主要(yào / yāo)是(shì)運行載體平台
  • Android
  • IOS

以(yǐ)上(shàng)就(jiù)是(shì)一個(gè)大(dà)緻的(de)架構層級。

下面我們在(zài)通過一個(gè)小程序啓動運行流程來(lái)看下，各層架構設計在(zài)運行時(shí)的(de)細節 還是(shì)先給大(dà)家看一個(gè)圖

從圖中我們看到(dào)核心的(de)控制層和(hé / huò) socket server 服務的(de)交互 ，他(tā)就(jiù)相當于(yú)人(rén)的(de)中樞運載這(zhè)各部件相互和(hé / huò)諧的(de)工作，下面還是(shì)用文字來(lái)簡述下整個(gè)啓動流程。

• 啓動流程說(shuō)明
  • 加載小程序系統配置文件
  • 創建 APPSERVICE webview
  • 根據配置創建 HOME PAGEFRAME WEBVIEW
  • 通知 Socket Server 路由信息
  • Socket Server 轉發路由信息到(dào) APPSERVICE
  • APPSERVICE 通知 HOME PAGEFRAME 渲染
  • HOME PAGEFRAME 通知 APPSERVICE 渲染狀态

加載小程序系統配置文件

• 配置信息
  • APP 信息
    • appid
    • Tabbar 信息
    • tabbar 列表
    • tabar 樣式
  • Navigator 信息
    • navigate 樣式
  • 場景信息
  • 其他(tā)信息

創建 APPSERVICE

• 小程序加載時(shí)，先創建 APPSERVICE webview
• APPSERVICE webview 創建完成後
  • 自動連接到(dào) socket server
  • 獲取網絡信息
  • 獲取粘貼闆數據
  • 其他(tā)

創建 HOME PAGEFRAME WEBVIEW

• 基于(yú)小程序配置，解析主頁路徑
• 創建主頁 Webview，創建完成後
  • 自動動連接到(dào) socket server
  • 發布 xWebVideoSupported 到(dào) appservice
  • vdSync 到(dào) appservice
  • GenerateFuncReady 到(dào) appservice

通知 Socket Server 路由信息

• Home page webview 創建之(zhī)前，發送 onAppRoute 信息
• Home page webview 創建後，發送 onAppRouteDone 信息

Socket server 轉發路由信息

• Socket server 轉發控制層信息到(dào) appservice
  • onAppRoute
  • onAppRouteDone

Service 通知 Page 渲染

• Service 以(yǐ)消息的(de)方式，通知 Page 渲染
  • vdSync * webview 信息同步
  • vdSyncBatch * webview 頁面選擇
  • invokeWebviewMethod * 通知 webiew 更新

Page 通知 Service 渲染狀态

• __DOMReady 消息

這(zhè)個(gè)算是(shì)一個(gè)微信小程序啓動經曆的(de)一些過程，隻能說(shuō)參考分析，比較不(bù)是(shì)開發人(rén)員不(bù)能準确說(shuō)做來(lái)那些事

可能大(dà)家看了(le／liǎo)上(shàng)面的(de)内容還是(shì)比較模糊，最核心的(de)消息事件是(shì)怎麽處理的(de)，有那些事件是(shì)怎麽進行分發的(de)，下面我還是(shì)會先來(lái)從設計層面先來(lái)分析一下

下面還是(shì)先看下一個(gè)圖（整個(gè)的(de)消息通信機制）

這(zhè)個(gè)圖如果你們深入研究過這(zhè)塊内容的(de)應該都可以(yǐ)看懂 service webview socket 之(zhī)間的(de)關聯，下面我還是(shì)會簡述一下。

所有的(de)消息類型

• 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
• 消息處理
  • 無特殊處理

在(zài)微信開發者工具裏面采用的(de)這(zhè)種無阻塞消息通訊可以(yǐ)更好的(de)處理這(zhè)些事件之(zhī)間的(de)關聯性和(hé / huò)靈活性，這(zhè)種方式具備的(de)特點：

• 發送方可以(yǐ)随時(shí)向 socket server 發送消息
• 發送方可以(yǐ)向任意接收方發送消息，無論接收方是(shì)否存在(zài)
• 接收方可用時(shí)，發送給接收方的(de)消息可以(yǐ)即時(shí)送達
• 消息不(bù)丢失

但在(zài)我們手機上(shàng)面使用的(de)微信小程序，微信肯定不(bù)是(shì)采用這(zhè)種方式的(de)，應爲(wéi / wèi)這(zhè)種方式最大(dà)的(de)問題就(jiù)是(shì)效率和(hé / huò)穩定性，在(zài)原生上(shàng)面應該采用橋接的(de)方式

本來(lái)打算放一些案例的(de)，後來(lái)發現寫下來(lái)都沒有代碼本篇比較存粹的(de)講解下小程序的(de)架構，希望可以(yǐ)幫大(dà)家對小程序運行環境理解帶來(lái)一點小小幫助

本文作者：風逝     公衆号：小風以(yǐ)北
博主獲取授權後轉載。如需轉載請聯系博主獲取授權。