小程序的雙線程模型

2019-09-08 09:32:32 112

誰是小程序的宿主環境呢?顯而易見小程序的宿主環境是微信。

宿主環境為了執行小程序的各種文件:wxml文件、wxss文件、js文件,提供了雙線模型。

wxml文件:通俗的來做這類文件是用來做布局的,類似網頁開發中的html。

wxss文件:類似網頁開發中的css,是用來做樣式的。

js文件:是用來寫很多邏輯的,可以稱為邏輯層。

雙線程是什么?我們來看個官方的截圖:

新鄉網站建設|新鄉網絡公司|新鄉小程序開發|新鄉APP開發

邏輯層:創建一個單獨的線程去執行 JavaScript,在這個環境下執行的都是有關小程序業務邏輯的代碼 

渲染層:界面渲染相關的任務全都在 WebView 線程里執行,通過邏輯層代碼去控制渲染哪些界面。一個小程序存在多個界面,所以渲染層存在多個 WebView 線程


界面渲染-初始化渲染

WXML可以先轉成Js對象,在渲染成真正的DOM樹如下圖:

新鄉網站建設|新鄉網絡公司|新鄉小程序開發|新鄉APP開發

界面渲染過程-數據發生變化

通過setData把msg數據從“Hello Word”變成“Goodbye”為例簡述。

  1. 產生的js對象對應的節點就回發生變化

  2. 此時可以對比前后兩個JS對象得到變化的部分

  3. 然后把這個差異應用到原來的Dom樹上

  4. 從而達到更新UI的目的,這就是“數據驅動”的原理

如下圖所示:

新鄉網站建設|新鄉網絡公司|新鄉小程序開發|新鄉APP開發

界面渲染的整體流程

  1. 在渲染層,宿主環境會把WXML轉化成對應的JS對象;

  2. 將JS對象再次轉化成真實DOM樹,交由渲染層線層渲染;

  3. 數據變化時,邏輯層提供最新的變化數據,JS對象發生變化比較進行diff算法對比;

  4. 將最新變化的內容反映到真實的DOM樹種,更新UI;

快乐12胆拖玩法图片 股票软件股票 贵州快3号码推荐 全部天津11选5走势图 850游戏吧论坛 捕鱼大富翁官网手机版下载 海南4+1app 香港中特精准网 江西多乐彩开奖查询 股票下跌途中放量 宝博大厅下载安装4.0 股票软件股票 贵州快3号码推荐 全部天津11选5走势图 850游戏吧论坛 捕鱼大富翁官网手机版下载 海南4+1app 香港中特精准网 江西多乐彩开奖查询 股票下跌途中放量 宝博大厅下载安装4.0