[TOC] ## 2.1 渲染層和邏輯層 小程序的運行環境分成`渲染層`和`邏輯層`， 小程序的渲染層和邏輯層分離是經過很多考慮得出來的模型。 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。 代碼清單3-1 渲染“Hello World”WXML代碼 ~~~HTML <view>{{ msg }}</view> ~~~ 在 JS 腳本使用 this.setData 方法把 msg 字段設置成 “Hello World” ，如代碼清單3-2所示。 代碼清單3-2 渲染“Hello World”JS腳本 ~~~JavaScript Page({ onLoad: function () { this.setData({ msg: 'Hello World' }) } }) ~~~ 從這個例子我們可以看到3個點： 1. `渲染層`（WXML、WXSS文件）和數據相關。即：怎樣表現數據（`Show Data`）。 2. `邏輯層`（js文件）負責產生、處理數據。即：什么樣的數據（`What Data`）。 3. `邏輯層`（js文件）通過 Page 實例的 setData 方法傳遞數據到渲染層。即：怎么傳遞數據（`Send Data`）。 ### 2.1.1 邏輯層--App Service 小程序開發框架的邏輯層由 JavaScript 編寫。 邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋。 在 JavaScript 的基礎上，我們做了一些修改，以方便地開發小程序。 * 增加 `App` 和 `Page` 方法，進行程序和頁面的注冊。 * 增加 `getApp` 和 `getCurrentPages` 方法，分別用來獲取 App 實例和當前頁面棧。 * 提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。 * 每個頁面有獨立的作用域，并提供模塊化能力。 * 由于框架并非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 `document`，`window` 等。 * 開發者寫的所有代碼最終將會打包成一份 JavaScript，并在小程序啟動的時候運行，直到小程序銷毀。類似 `ServiceWorker`，所以邏輯層也稱之為 `App Service`。 ### 2.1.2 渲染層/視圖層--View 視圖層 View 框架的視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。 WXML(WeiXin Markup language) 用于描述頁面的結構。 WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。 WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。 組件(Component)是視圖的基本組成單元。 #### 2.1.2.1 WXML WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。 WXML 具有的能力： 1. **數據綁定** 2. **列表渲染** 3. **條件渲染** 4. **模板** 5. **事件** 6. **引用** #### 2.1.2.2 WXS WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。 WXS可進行： 1. **頁面渲染** 2. **數據處理** #### 2.1.2.3 WXSS WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。 WXSS 用來決定 WXML 的組件應該怎么顯示。 為了適應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。 #### 2.1.2.4 組件 框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。 ### 2.1.3 通信模型 小程序的渲染層和邏輯層分別由2個線程管理： - 渲染層的界面使用了`WebView` 進行渲染； - 邏輯層采用`JsCore`線程運行JS腳本。 一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經由微信客戶端（下文中也會采用`Native`來代指微信客戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通信模型如圖3-1所示。 :-:  :-: 圖3-1 渲染層和邏輯層通信模型 ### 2.1.4 數據驅動 在開發UI界面過程中，通常界面視圖和變量狀態是相關聯的，可以通過`數據驅動`這種機制將狀態和視圖綁定在一起（狀態變更時，視圖也能自動變更），那我們就可以省去大量手動修改視圖的工作。 小程序的WXML結構實際上等價于一棵Dom樹，同時通過一個JS對象也可以來表達Dom樹的結構，如圖3-2所示。 :-:  :-: 圖3-2 WXML結構和JS對象均可以表示一棵Dom樹 WXML可以先轉成JS對象，然后再渲染出真正的Dom樹，回到前述的“Hello World”例子，我們可以看到轉換的過程如圖3-3所示。 :-:  :-: 圖3-3 WXML結構轉JS對象，再轉Dom樹 通過setData把msg數據從“Hello World”變成“Goodbye”，產生的JS對象對應的節點就會發生變化，此時可以對比前后兩個JS對象得到變化的部分，然后把這個差異應用到原來的Dom樹上，從而達到更新UI的目的，這就是`數據驅動`的原理，如圖3-4所示。 :-:  :-: 圖3-4 狀態更新的時候，通過對比前后JS對象變化，進而改變視圖層的Dom樹 >[info] HY：小程序數據驅動要點 > 1. JS對象 > 2. DOM樹 > 3. JS對象發生變化就會引起DOM樹的變化 ### 2.1.5 雙線程下的界面渲染 小程序的邏輯層和渲染層是分開的兩個線程。 在渲染層，宿主環境會把WXML轉化成對應的JS對象，在邏輯層發生數據變更的時候，我們需要通過宿主環境提供的`setData`方法把數據從邏輯層傳遞到渲染層，再經過對比前后差異，把差異應用在原來的Dom樹上，渲染出正確的UI界面，如圖3-5所示。 :-:  :-: 圖3-5 邏輯層傳遞數據到渲染層