一、資料綁定
1.1 渲染層和邏輯層
小程式宿主環境我們稱微信用戶端給小程式所提供的環境為宿主環境。小程式借助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能。
小程式開發架構的目标是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。
整個小程式架構系統分為兩部分：邏輯層（App Service）和 視圖層（View）
邏輯層與渲染層分離 首先，我們來簡單了解下小程式的運作環境。小程式的運作環境分成
渲染層和邏輯層，其中 WXML 模闆和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。
小程式的渲染層和邏輯層分别由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層采用JsCore線程運作JS腳本。一個小程式存在多個界面，是以渲染層存在多個 WebView線程，這兩個線程的通信會經由微信用戶端（下文中也會采用Native來代指微信用戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程式的通信模型下圖所示。
1.2 邏輯檔案介紹app.js pages.js
app.js 小程式邏輯每個小程式都需要在 app.js 中調用 App 方法注冊小程式執行個體，綁定生命周期回調函數、錯誤監聽和頁面不存在監聽函數等
生命周期回調函數:小程式從建立到銷毀的整個過程，自動建立的一些函數
包含内容：- 全局變量 globalData:{}
- 生命周期函數
- 定義事件函數
對于小程式中的每個頁面，都需要在頁面對應的 js 檔案中進行注冊，指定頁面的初始資料、生命周期回調、事件處理函數等
- data界面視圖的資料内容
2.自己的生命周期函數
3.自定義事件的函數
1.3 邏輯層javascript
我們先看下小程式的javascript和普通頁面的javascript差別
小程式javascript的三個特點：
1.小程式不是運作在浏覽器中，沒有BOM和DOM
console.log(window) ->undefined
console.log(document) ->undefined
2.小程式的js有一些額外的成員
App()方法 用于定義應用程式執行個體對象
Page()方法 用于定義頁面對象
getApp()方法 用于擷取全局的應用程式對象
wx 對象 提供核心API
// xxx.jsconst appInstance = getApp()
console.log(appInstance.globalData) // I am global data
3.小程式的js支援Commonjs規範
module.exports={} 導出
var data=require(./data.js) 引入
子產品化可以将一些公共的代碼抽離成為一個單獨的 js 檔案，作為一個子產品。子產品通過 module.exports 對外暴露接口。
在需要使用這些子產品的檔案中，使用 require 将公共代碼引入
在 JavaScript 檔案中聲明的變量和函數隻在該檔案中有效 不同的檔案中可以聲明相同名字的變量和函數，不會互相影響
1.4 界面層資料綁定
1.4.1 資料綁定
WXML 中的動态資料均來自對應 Page 的 data。
界面
邏輯
data
簡單綁定資料綁定使用 Mustache 文法（雙大括号）将變量包起來，可以作用于：
内容 元件屬性(需要在雙引号之内)
{{}}文法用途
表達式 擷取變量 綁定class屬性
特殊地方：
1.4.2 清單渲染
wx:for在元件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的資料重複渲染該元件。
預設數組的目前項的下标變量名預設為 index，數組目前項的變量名預設為 item
使用 wx:for-item 可以指定數組目前元素的變量名，
使用 wx:for-index 可以指定數組目前下标的變量名：
類似 block wx:if，也可以将 wx:for 用在<block/>标簽上，以渲染一個包含多節點的結構塊。例如：
1.4.3 條件渲染
wx:if
在架構中，使用 wx:if="" 來判斷是否需要渲染該代碼塊：
因為 wx:if 是一個控制屬性，需要将它添加到一個标簽上。如果要一次性判斷多個元件标簽，可以使用一個 <block/> 标簽将多個元件包裝起來，并在上邊使用 wx:if 控制屬性。
<block/> 并不是一個元件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，隻接受控制屬性。
wx:if vs hidden
因為 wx:if 之中的模闆也可能包含資料綁定，是以當 wx:if 的條件值切換時，架構有一個局部渲染的過程，因為它會確定條件塊在切換時銷毀或重新渲染。
同時 wx:if 也是
惰性的，如果在初始渲染條件為 false，架構什麼也不做，在條件第一次變成真的時候才開始局部渲染。
相比之下，hidden 就簡單的多，元件始終會被渲染，隻是簡單的控制顯示與隐藏。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。是以，如果需要頻繁切換的情景下，用 hidden 更好，如果在運作時條件不大可能改變則 wx:if 較好。
二、事件處理
2.1 什麼是事件
- 事件是視圖層到邏輯層的通訊方式。
- 事件可以将使用者的行為回報到邏輯層進行處理。
- 事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
- 事件對象可以攜帶額外資訊，如 id, dataset, touches
在元件中綁定一個事件處理函數。
如bindtap，當使用者點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函數。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相應的Page定義中寫上相應的事件處理函數，參數是event。
2.2 事件冒泡
2.2.1 事件分類
事件分為冒泡事件和非冒泡事件：
冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。
非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。
2.2.2 綁定并阻止事件冒泡
除 bind 外，也可以用 catch 來綁定事件。
與 bind 不同， catch 會阻止事件向上冒泡。
例如在下邊這個例子中，點選 inner view 會先後調用handleTap3和handleTap2(因為tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點選 middle view 會觸發handleTap2，點選 outer view 會觸發handleTap1。
2.3 事件傳參
dataset在元件節點中可以附加一些自定義資料。這樣，在事件中可以擷取這些自定義的節點資料，用于事件的邏輯處理。
在 WXML 中，這些自定義資料以 data- 開頭，多個單詞由連字元 - 連接配接。這種寫法中，連字元寫法會轉換成駝峰寫法，而大寫字元會自動轉成小寫字元。如：
- data-element-type ，最終會呈現為 event.currentTarget.dataset.elementType ；
- data-elementType ，最終會呈現為 event.currentTarget.dataset.elementtype 。
2.4單數資料流
實作資料同步修改index.wxml
模闆使用
WXML提供模闆（template），可以在模闆中定義代碼片段，然後在不同的地方調用。
3.1 定義模闆
使用 name 屬性，作為模闆的名字。然後在<template/>内定義代碼片段，如：
3.2 使用模闆
使用 is 屬性，聲明需要的使用的模闆，然後将模闆所需要的 data 傳入，如：
is 屬性可以使用 Mustache 文法，來動态決定具體需要渲染哪個模闆：
三、網易雲精選案例
效果圖：