微信小程序?yàn)榱烁玫奶岣吖芸匦院桶踩裕圆捎秒p線程模型。

如下面官方圖，微信小程序的渲染層與管理層分別由兩個(gè)線程管理：渲染層采用了Webview來(lái)渲染，一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè) WebView 線程，而邏輯層采用js腳本來(lái)渲染。視圖層和邏輯層通過(guò)系統(tǒng)層的 WeixinJsBridage 進(jìn)行通信：邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁(yè)面更新，視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。之后邏輯層和試圖層的通信會(huì)由 Native （微信客戶端）做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由 Native 轉(zhuǎn)發(fā)。

 Virtual DOM 的渲染過(guò)程大概為:用JS對(duì)象模擬DOM樹(shù)->比較兩棵虛擬DOM樹(shù)的差異->把差異應(yīng)用到真正的DOM樹(shù)上。

微信小程序頁(yè)面的具體流程類似：在渲染層，宿主環(huán)境會(huì)把wxml轉(zhuǎn)化成對(duì)應(yīng)的js對(duì)象，在邏輯層發(fā)生數(shù)據(jù)變更的時(shí)候，我們需要通過(guò)宿主環(huán)境提供的 setData 方法把數(shù)據(jù)從邏輯層傳遞到渲染層，再經(jīng)過(guò)對(duì)比前后差異，把差異應(yīng)用在原來(lái)的Dom樹(shù)上，渲染出正確的UI界面。

以上就是對(duì)微信小程序底層架構(gòu)原理簡(jiǎn)單的介紹。

以上內(nèi)容來(lái)自網(wǎng)絡(luò)，侵刪