從(cóng)事過網頁編程的人(rén)知道(dào)，網頁編程采用的是 HTML + CSS + JS 這(zhè)樣的組合，其中 HTML 是用來描述當前這(zhè)個頁面的結構，CSS 用來描述頁面的樣子，JS 通(tōng)常是用來處理這(zhè)個頁面和(hé)用戶的交互。
同樣道(dào)理，在小程序中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。打開(kāi) pages/index/index.wxml，你會看(kàn)到以下(xià)的內(nèi)容:
和(hé) HTML 非常相似，WXML 由标簽、屬性等等構成。但(dàn)是也有很(hěn)多不一(yī)樣的地(dì)方，我們來一(yī)一(yī)闡述一(yī)下(xià)：
标簽名字有點不一(yī)樣
往往寫 HTML 的時(shí)候，經常會用到的标簽是 div, p, span，開(kāi)發者在寫一(yī)個頁面的時(shí)候可(kě)以根據這(zhè)些基礎的标簽組合出不一(yī)樣的組件，例如(rú)日曆、彈窗等等。換個思路，既然大家都(dōu)需要(yào)這(zhè)些組件，為(wèi)什麽我們不能(néng)把這(zhè)些常用的組件包裝起來，大大提高我們的開(kāi)發效率。
從(cóng)上(shàng)邊的例子可(kě)以看(kàn)到，小程序的 WXML 用的标簽是 view, button, text 等等，這(zhè)些标簽就是小程序給開(kāi)發者包裝好的基本能(néng)力，我們還提供了(le)地(dì)圖、視(shì)頻(pín)、音頻(pín)等等組件能(néng)力。
更多詳細的組件講述參考下(xià)個章(zhāng)節 小程序的能(néng)力
多了(le)一(yī)些 wx:if 這(zhè)樣的屬性以及 {{ }} 這(zhè)樣的表達式
在網頁的一(yī)般開(kāi)發流程中，我們通(tōng)常會通(tōng)過 JS 操作(zuò) DOM (對應 HTML 的描述産生的樹(shù))，以引起界面的一(yī)些變化響應用戶的行(xíng)為(wèi)。例如(rú)，用戶點擊某個按鈕的時(shí)候，JS 會記錄一(yī)些狀态到 JS 變量裏邊，同時(shí)通(tōng)過 DOM API 操控 DOM 的屬性或者行(xíng)為(wèi)，進而引起界面一(yī)些變化。當項目越來越大的時(shí)候，你的代碼會充斥着非常多的界面交互邏輯和(hé)程序的各種狀态變量，顯然這(zhè)不是一(yī)個很(hěn)好的開(kāi)發模式，因此就有了(le) MVVM 的開(kāi)發模式（例如(rú) React, Vue），提倡把渲染和(hé)邏輯分離。簡單來說就是不要(yào)再讓 JS 直接操控 DOM，JS 隻需要(yào)管理狀态即可(kě)，然後再通(tōng)過一(yī)種模闆語法來描述狀态和(hé)界面結構的關系即可(kě)。
小程序的框架也是用到了(le)這(zhè)個思路，如(rú)果你需要(yào)把一(yī)個 Hello World 的字符串顯示在界面上(shàng)。
WXML 是這(zhè)麽寫 :
JS 隻需要(yào)管理狀态即可(kě):
this.setData({ msg: "Hello World" })
通(tōng)過 {{ }} 的語法把一(yī)個變量綁定到界面上(shàng)，我們稱為(wèi)數(shù)據綁定。僅僅通(tōng)過數(shù)據綁定還不夠完整的描述狀态和(hé)界面的關系，還需要(yào) if/else, for等控制能(néng)力，在小程序裏邊，這(zhè)些控制能(néng)力都(dōu)用 wx: 開(kāi)頭的屬性來表達。
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發