WXML 模闆

從(cóng)事(shì)過網頁編程的人知(zhī)道(dào)，網頁編程采用(yòng)的是 HTML + CSS + JS 這(zhè)樣的組合，其中 HTML 是用(yòng)來(lái)描述當前這(zhè)個頁面的結構，CSS 用(yòng)來(lái)描述頁面的樣子，JS 通常是用(yòng)來(lái)處理(lǐ)這(zhè)個頁面和(hé)用(yòng)戶的交互。

同樣道(dào)理(lǐ)，在小(xiǎo)程序中也(yě)有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。打開(kāi) pages/index/index.wxml，你(nǐ)會(huì)看(kàn)到(dào)以下(xià)的内容:

獲取頭像昵稱

{{userInfo.nickName}}

{{motto}}

和(hé) HTML 非常相似，WXML 由标簽、屬性等等構成。但(dàn)是也(yě)有很(hěn)多不一樣的地方，我們來(lái)一一闡述一下(xià)：

标簽名字有點不一樣

往往寫 HTML 的時(shí)候，經常會(huì)用(yòng)到(dào)的标簽是 div, p, span，開(kāi)發者在寫一個頁面的時(shí)候可以根據這(zhè)些(xiē)基礎的标簽組合出不一樣的組件，例如日曆、彈窗等等。換個思路，既然大(dà)家都需要這(zhè)些(xiē)組件，爲什(shén)麽我們不能(néng)把這(zhè)些(xiē)常用(yòng)的組件包裝起來(lái)，大(dà)大(dà)提高(gāo)我們的開(kāi)發效率。

從(cóng)上(shàng)邊的例子可以看(kàn)到(dào)，小(xiǎo)程序的 WXML 用(yòng)的标簽是 view, button, text 等等，這(zhè)些(xiē)标簽就是小(xiǎo)程序給開(kāi)發者包裝好(hǎo)的基本能(néng)力，我們還提供了(le)地圖、視(shì)頻、音(yīn)頻等等組件能(néng)力。

更多詳細的組件講述參考下(xià)個章節 小(xiǎo)程序的能(néng)力

多了(le)一些(xiē) wx:if 這(zhè)樣的屬性以及 {{ }} 這(zhè)樣的表達式

在網頁的一般開(kāi)發流程中，我們通常會(huì)通過 JS 操作(zuò) DOM (對(duì)應 HTML 的描述産生的樹)，以引起界面的一些(xiē)變化響應用(yòng)戶的行爲。例如，用(yòng)戶點擊某個按鈕的時(shí)候，JS 會(huì)記錄一些(xiē)狀态到(dào) JS 變量裏邊，同時(shí)通過 DOM API 操控 DOM 的屬性或者行爲，進而引起界面一些(xiē)變化。當項目越來(lái)越大(dà)的時(shí)候，你(nǐ)的代碼會(huì)充斥着非常多的界面交互邏輯和(hé)程序的各種狀态變量，顯然這(zhè)不是一個很(hěn)好(hǎo)的開(kāi)發模式，因此就有了(le) MVVM 的開(kāi)發模式（例如 React, Vue），提倡把渲染和(hé)邏輯分離。簡單來(lái)說就是不要再讓 JS 直接操控 DOM，JS 隻需要管理(lǐ)狀态即可，然後再通過一種模闆語法來(lái)描述狀态和(hé)界面結構的關系即可。

小(xiǎo)程序的框架也(yě)是用(yòng)到(dào)了(le)這(zhè)個思路，如果你(nǐ)需要把一個 Hello World 的字符串顯示在界面上(shàng)。

WXML 是這(zhè)麽寫 :

{{msg}}

JS 隻需要管理(lǐ)狀态即可:

this.setData({ msg: "Hello World" })

通過 {{ }} 的語法把一個變量綁定到(dào)界面上(shàng)，我們稱爲數據綁定。僅僅通過數據綁定還不夠完整的描述狀态和(hé)界面的關系，還需要 if/else, for等控制能(néng)力，在小(xiǎo)程序裏邊，這(zhè)些(xiē)控制能(néng)力都用(yòng) wx: 開(kāi)頭的屬性來(lái)表達。