小程序宿主環境的基本運行機制以及它所提供的各種能力，組合這些能力可以完成一個體驗非常流暢的小程序，同時讀者也了解到如何對小程序在不同環境下兼容的辦法，以便給不同環境下的的微信用戶提供可靠或者降級的服務。在下一章中，我們會給讀者展示如何利用小程序的能力實現各類場景應用。
小程序可以調用宿主環境提供的微信客戶端的能力，這就使得小程序比普通網頁擁有更多的能力。你也會了解到，你的小程序會運行在不同版本的宿主環境下，因此針對各個版本的宿主環境做程序上的兼容也是在所難免的。
小程序可以調用宿主環境提供的微信客戶端的能力，這就使得小程序比普通網頁擁有更多的能力。你也會了解到，你的小程序會運行在不同版本的宿主環境下，因此針對各個版本的宿主環境做程序上的兼容也是在所難免的。
小程序的運行環境分成渲染層和邏輯層，第2章提到過 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。小程序的渲染層和邏輯層分離是經過很多考慮得出來的模型，在第6章我們會詳細闡述這個模型背后的原理以及產生的問題。在本章我們會先介紹這個模型的基本工作方式。
1.渲染層和數據相關。
2.邏輯層負責產生、處理數據。
3.邏輯層通過 Page 實例的 setData 方法傳遞數據到渲染層。
.wxml
<view>{{ msg }}</view>
.js
Page({
onLoad: function () {
this.setData({ msg: 'Hello World' })
}
})
通信模型
小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層采用JsCore線程運行JS腳本。一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經由微信客戶端（下文中也會采用Native來代指微信客戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通信模型如下圖。
數據驅動
在開發UI界面過程中，程序需要維護很多變量狀態，同時要操作對應的UI元素。隨著界面越來越復雜，我們需要維護很多變量狀態，同時要處理很多界面上的交互事件，整個程序變得越來越復雜。通常界面視圖和變量狀態是相關聯的，如果有某種“方法”可以讓狀態和視圖綁定在一起（狀態變更時，視圖也能自動變更），那我們就可以省去手動修改視圖的工作。
這個方法就是“數據驅動”，下邊我們來介紹一下小程序的數據驅動基本原理。
WXML結構實際上等價于一棵Dom樹，通過一個JS對象也可以來表達Dom樹的結構，如下圖
WXML可以先轉成JS對象，然后再渲染出真正的Dom樹，回到“Hello World”那個例子，我們可以看到轉換的過程如下圖
通過setData把msg數據從“Hello World”變成“Goodbye”，產生的JS對象對應的節點就會發生變化，此時可以對比前后兩個JS對象得到變化的部分，然后把這個差異應用到原來的Dom樹上，從而達到更新UI的目的，這就是“數據驅動”的原理，如圖3-4所示。
雙線程下的界面渲染
小程序的邏輯層和渲染層是分開的兩個線程。在渲染層，宿主環境會把WXML轉化成對應的JS對象，在邏輯層發生數據變更的時候，我們需要通過宿主環境提供的setData方法把數據從邏輯層傳遞到渲染層，再經過對比前后差異，把差異應用在原來的Dom樹上，渲染出正確的UI界面，如圖3-5所示。
圖3-5 邏輯層傳遞數據到渲染層
