Categories
程式開發

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


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

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

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

正文

總體架構

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

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

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

  • 展現層 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

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

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

還是先給大家看一個圖

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

從圖中我們看到核心的控制層和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 消息

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

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

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

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

這個圖如果你們深入研究過這塊內容的應該都可以看懂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 發送消息
  • 發送方可以向任意接收方發送消息,無論接收方是否存在
  • 接收方可用時,發送給接收方的消息可以即時送達
  • 消息不丟失

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

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