核心篇分了幾篇來描述，本文先從整體系統(tǒng)層面來概括小程序運行環(huán)境時的架構(gòu)，明白它的整體大致流程，后面會接著更新細(xì)節(jié)內(nèi)容

• 總體架構(gòu)圖解
• 架構(gòu)分步詳解
• 啟動流程過程
• 消息通信流程
• 消息處理機(jī)制

總體架構(gòu)

先給大家展示一張架構(gòu)大致圖

可以看出大致的一個層次結(jié)構(gòu)

• 展現(xiàn)層 UI Simulator Layer
• 控制層 Control Layer
• 消息處理層 Message Handler Layer
• 服務(wù)層 Service Layer
• 基礎(chǔ)設(shè)施層 Infrastructure Layer
• 本地層 Native Layer
• 操作系統(tǒng)層 OS Layer

展現(xiàn)層 UI Simulator Layer

• 小程序的頁面顯示，菜單標(biāo)題等展示內(nèi)容
• 響應(yīng)用戶的事件操作

控制層 Control Layer

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

服務(wù)層 Service Layer

• 先處理 Message 消息，在各層之間相互轉(zhuǎn)發(fā)在返回結(jié)果
  • 網(wǎng)絡(luò)服務(wù) API
  • 存儲服務(wù) API
  • 微信數(shù)據(jù)服務(wù) API
  • 事件跟蹤服務(wù) API
  • 小程序配置信息服務(wù) API
  • 渲染狀態(tài)服務(wù) API
  • 分享服務(wù) API
  • 文件操作服務(wù) API
  • 其他

基礎(chǔ)設(shè)施層 Infrastructure Layer

• Log 文件系統(tǒng)
  • 日志文件存儲
• Level DB
  • 數(shù)據(jù)存儲

基本地層 Native Layer

• 本地層主要負(fù)責(zé)設(shè)備的具體操作
  • 訪問相機(jī)
  • 訪問 GPS
  • 訪問通訊錄
  • 訪問相冊
  • 訪問文件系統(tǒng)
  • 撥號
  • 其他

操作系統(tǒng)層 OS Layer

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

以上就是一個大致的架構(gòu)層級。

下面我們在通過一個小程序啟動運行流程來看下，各層架構(gòu)設(shè)計在運行時的細(xì)節(jié) 還是先給大家看一個圖

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

• 啟動流程說明
  • 加載小程序系統(tǒng)配置文件
  • 創(chuàng)建 APPSERVICE webview
  • 根據(jù)配置創(chuàng)建 HOME PAGEFRAME WEBVIEW
  • 通知 Socket Server 路由信息
  • Socket Server 轉(zhuǎn)發(fā)路由信息到 APPSERVICE
  • APPSERVICE 通知 HOME PAGEFRAME 渲染
  • HOME PAGEFRAME 通知 APPSERVICE 渲染狀態(tài)

加載小程序系統(tǒng)配置文件

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

創(chuàng)建 APPSERVICE

• 小程序加載時，先創(chuàng)建 APPSERVICE webview
• APPSERVICE webview 創(chuàng)建完成后
  • 自動連接到 socket server
  • 獲取網(wǎng)絡(luò)信息
  • 獲取粘貼板數(shù)據(jù)
  • 其他

創(chuàng)建 HOME PAGEFRAME WEBVIEW

• 基于小程序配置，解析主頁路徑
• 創(chuàng)建主頁 Webview，創(chuàng)建完成后
  • 自動動連接到 socket server
  • 發(fā)布 xWebVideoSupported 到 appservice
  • vdSync 到 appservice
  • GenerateFuncReady 到 appservice

通知 Socket Server 路由信息

• Home page webview 創(chuàng)建之前，發(fā)送 onAppRoute 信息
• Home page webview 創(chuàng)建后，發(fā)送 onAppRouteDone 信息

Socket server 轉(zhuǎn)發(fā)路由信息

• Socket server 轉(zhuǎn)發(fā)控制層信息到 appservice
  • onAppRoute
  • onAppRouteDone

Service 通知 Page 渲染

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

Page 通知 Service 渲染狀態(tài)

• __DOMReady 消息

這個算是一個微信小程序啟動經(jīng)歷的一些過程，只能說參考分析，比較不是開發(fā)人員不能準(zhǔn)確說做來那些事

可能大家看了上面的內(nèi)容還是比較模糊，最核心的消息事件是怎么處理的，有那些事件是怎么進(jìn)行分發(fā)的，下面我還是會先來從設(shè)計層面先來分析一下

下面還是先看下一個圖（整個的消息通信機(jī)制）

這個圖如果你們深入研究過這塊內(nèi)容的應(yīng)該都可以看懂 service webview socket 之間的關(guān)聯(lián)，下面我還是會簡述一下。

所有的消息類型

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

APPSERVICE_ON_EVENT

• 發(fā)送方
  • 控制層
• 接收方
  • APPSERVICE
  • WEBVIEW
• 消息處理
  • 無特殊處理

APPSERVICE_INVOKE

• 發(fā)送方
  • APPSERVICE
• 接收方
  • APPSERVICE
  • WEBVIEW
• 消息處理
  • 調(diào)用 API
  • 返回 APPSERVICE_INVOKE_CALLBACK 消息

APPSERVICE_PUBLISH

• 發(fā)送方
  • APPSERVICE
• 接收方
  • WEBVIEW
• 消息處理
  • 無特殊處理

WEBVIEW_ON_INVOKE

• 發(fā)送方
  • WEBVIEW
• 接收方
  • WEBVIEW
• 消息處理
  • 調(diào)用 API
  • 返回 WEBVIEW_ON_INVOKE_CALLBACK 消息

WEBVIEW_PUBLISH

• 發(fā)送方
  • WEBVIEW
• 接收方
  • APPSERVICE
• 消息處理
  • 無特殊處理

在微信開發(fā)者工具里面采用的這種無阻塞消息通訊可以更好的處理這些事件之間的關(guān)聯(lián)性和靈活性，這種方式具備的特點：

• 發(fā)送方可以隨時向 socket server 發(fā)送消息
• 發(fā)送方可以向任意接收方發(fā)送消息，無論接收方是否存在
• 接收方可用時，發(fā)送給接收方的消息可以即時送達(dá)
• 消息不丟失

但在我們手機(jī)上面使用的微信小程序，微信肯定不是采用這種方式的，應(yīng)為這種方式最大的問題就是效率和穩(wěn)定性，在原生上面應(yīng)該采用橋接的方式

本來打算放一些案例的，后來發(fā)現(xiàn)寫下來都沒有代碼本篇比較存粹的講解下小程序的架構(gòu)，希望可以幫大家對小程序運行環(huán)境理解帶來一點小小幫助

本文作者：風(fēng)逝     公眾號：小風(fēng)以北
博主獲取授權(quán)后轉(zhuǎn)載。如需轉(zhuǎn)載請聯(lián)系博主獲取授權(quán)。