小程序底層框架原理

開發模式

由於小程序宿主是客戶端的App,如果採用純客戶端的原生技術來編寫,那小程序的代碼需要和App代碼一起發佈,這種開發節奏不符合小程序的需求所以要像 web 技術一樣存放一份隨時可以更新的資源包放在雲端,下載到本地動態執行後即可渲染出頁面。選擇Hybrid的渲染方式。

雙線程模型

可以阻止開發者使用一些瀏覽器提供的跳轉頁面,操作 DOM ,動態執行腳本等開放性接口。

  • 渲染層: 多個 WebView 線程進行渲染,由邏輯層代碼控制
  • 邏輯層: JsCore線程運行JS腳本,提供一個沙箱環境去運行開發者的 js 代碼,這個沙箱沒有 BOM 和DOM 等對象,只提供 setData 方法讓開發者可以操控頁面

雙線程通信

在這裏插入圖片描述
通過系統 Native 層的JSBridge進行通信,邏輯層和渲染層的通信由Native轉發,邏輯層發送的網絡請求也由Native轉發,DOM的更新由virtual DOM 實現,通信過程由 JS 基礎庫實現,小程序的基礎庫不會被打包到小程序而是內置在客戶端。

組件

H5組件:

  • 微信小程序的組件組織框架 Exparser: 核心方法有registerBehavior(註冊組件的一些基礎行爲,供組件繼承),registerElement (註冊組件,跟我們交互接口主要是屬性和事件)
  • 小程序的基礎組件可以通過 Polymer 實現。

native原生組件:

  • 繞過一些數據通信重渲染和 setData 等流程,性能更好
  • 擴展 Web 的能力,比如input textArea 和 Video 等組件,可以有更好的控制鍵盤的能力
  • 減輕 WebView 渲染map等複雜組件的渲染工作,其渲染不佔用 WebView 的線程
  • 原生組件的本質是 WebView 上蓋了 native 的原生組件,這也是爲什麼有時候不管頁面上的元素z-index設置多大都蓋不住一個 focus 的 input 或 textarea 的問題。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章