誰是小程序的宿主環境呢?顯而易見小程序的宿主環境是微信。
宿主環境為了執行小程序的各種文件:wxml文件、wxss文件、js文件,提供了雙線模型。
wxml文件:通俗的來做這類文件是用來做布局的,類似網頁開發中的html。
wxss文件:類似網頁開發中的css,是用來做樣式的。
js文件:是用來寫很多邏輯的,可以稱為邏輯層。
雙線程是什么?我們來看個官方的截圖:
邏輯層:創建一個單獨的線程去執行 JavaScript,在這個環境下執行的都是有關小程序業務邏輯的代碼
渲染層:界面渲染相關的任務全都在 WebView 線程里執行,通過邏輯層代碼去控制渲染哪些界面。一個小程序存在多個界面,所以渲染層存在多個 WebView 線程
界面渲染-初始化渲染
WXML可以先轉成Js對象,在渲染成真正的DOM樹如下圖:
界面渲染過程-數據發生變化
通過setData把msg數據從“Hello Word”變成“Goodbye”為例簡述。
產生的js對象對應的節點就回發生變化
此時可以對比前后兩個JS對象得到變化的部分
然后把這個差異應用到原來的Dom樹上
從而達到更新UI的目的,這就是“數據驅動”的原理
如下圖所示:
界面渲染的整體流程
在渲染層,宿主環境會把WXML轉化成對應的JS對象;
將JS對象再次轉化成真實DOM樹,交由渲染層線層渲染;
數據變化時,邏輯層提供最新的變化數據,JS對象發生變化比較進行diff算法對比;
將最新變化的內容反映到真實的DOM樹種,更新UI;