吃過燒烤之后，繼續(xù)Helloworld進(jìn)行說明，今天的內(nèi)容是wxml文件。

WXML（WeiXin Markup Language）是框架設(shè)計的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。它的語法和XML保持一致。

主畫面

主畫面的內(nèi)容由index.wxml定義。其內(nèi)容如下：

我們稍微細(xì)致一點說明一下index.wxml的內(nèi)容。讓C/C++程序員也能看懂。

注釋

是注釋行，在XML中注釋行的格式是。

最外層容器

接 下來第二行構(gòu)成最外層容器。這個容器的class被定義 為"container"，這個"container"是在上一篇文章中講到的app.wxss中定義的。通過這種方式將wxml和wxss聯(lián)系起來。

接下來的層次中有定義了兩個容器，對應(yīng)的是用戶信息和“HelloWorld”信息。

用戶信息容器

對應(yīng)用戶信息的容器的class被定義為“userinfo”，它在index.wxss中被定義。

這里增加了一個bindtap關(guān)鍵字，被指定為"bindViewTap”。它的含義是當(dāng)用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)bindViewTap。

用 戶信息容器中又包含了image對象和text對象。它們同樣使用class關(guān)鍵字指定了顯示屬性，我們就不在一一說明了。我們要說明的是數(shù)據(jù)綁定，數(shù)據(jù) 綁定使用 Mustache 語法（雙大括號）將變量包起來，數(shù)據(jù)綁定的效果就相當(dāng)于在頁面描述中埋入變量?？梢哉J(rèn)為，程序?qū)嶋H執(zhí)行時這些變量會被實際的值（或Image）替換。這些 值的提供者為.js文件，我們下一篇文章說明。具體來說，image對象綁定的是userInfo.avatarUrl，text對象綁定的是 userInfo.nickName。

問候語

包含一個簡單的text對象，綁定的是motto。

log表示頁面

這段代碼中view相關(guān)的內(nèi)容上面已經(jīng)講過了，這里只說明block。在這個例子中，block定義容器中的一個表示區(qū)域，這個區(qū)域使用數(shù)組的內(nèi)容進(jìn)行填充:

使用?wx:for?控制屬性指定被綁定的數(shù)組為logs

使用?wx:for-item?指定從數(shù)組中取出的元素的變量名為log

使用wx:key指定log和數(shù)組元素的關(guān)系，本例中的設(shè)定值為"*this"，表示log就是數(shù)組元素本身；如果數(shù)組元素包含多個屬性，可以指定屬性名來選擇具體的屬性。