零基礎(chǔ)學(xué)習(xí)微信小程序-事件處理和數(shù)據(jù)綁定
吃過(guò)燒烤之后,繼續(xù)Helloworld進(jìn)行說(shuō)明,今天的內(nèi)容是wxml文件。
WXML(WeiXin Markup Language)是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言,結(jié)合基礎(chǔ)組件、事件系統(tǒng),可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。它的語(yǔ)法和XML保持一致。
主畫(huà)面
主畫(huà)面的內(nèi)容由index.wxml定義。其內(nèi)容如下:
我們稍微細(xì)致一點(diǎn)說(shuō)明一下index.wxml的內(nèi)容。讓C/C++程序員也能看懂。
注釋
是注釋行,在XML中注釋行的格式是。
最外層容器
接 下來(lái)第二行構(gòu)成最外層容器。這個(gè)容器的class被定義 為"container",這個(gè)"container"是在上一篇文章中講到的app.wxss中定義的。通過(guò)這種方式將wxml和wxss聯(lián)系起來(lái)。
接下來(lái)的層次中有定義了兩個(gè)容器,對(duì)應(yīng)的是用戶信息和“HelloWorld”信息。
用戶信息容器
對(duì)應(yīng)用戶信息的容器的class被定義為“userinfo”,它在index.wxss中被定義。
這里增加了一個(gè)bindtap關(guān)鍵字,被指定為"bindViewTap”。它的含義是當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)bindViewTap。
用 戶信息容器中又包含了image對(duì)象和text對(duì)象。它們同樣使用class關(guān)鍵字指定了顯示屬性,我們就不在一一說(shuō)明了。我們要說(shuō)明的是數(shù)據(jù)綁定,數(shù)據(jù) 綁定使用 Mustache 語(yǔ)法(雙大括號(hào))將變量包起來(lái),數(shù)據(jù)綁定的效果就相當(dāng)于在頁(yè)面描述中埋入變量??梢哉J(rèn)為,程序?qū)嶋H執(zhí)行時(shí)這些變量會(huì)被實(shí)際的值(或Image)替換。這些 值的提供者為.js文件,我們下一篇文章說(shuō)明。具體來(lái)說(shuō),image對(duì)象綁定的是userInfo.avatarUrl,text對(duì)象綁定的是 userInfo.nickName。
問(wèn)候語(yǔ)
包含一個(gè)簡(jiǎn)單的text對(duì)象,綁定的是motto。
log表示頁(yè)面
這段代碼中view相關(guān)的內(nèi)容上面已經(jīng)講過(guò)了,這里只說(shuō)明block。在這個(gè)例子中,block定義容器中的一個(gè)表示區(qū)域,這個(gè)區(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ù)組元素包含多個(gè)屬性,可以指定屬性名來(lái)選擇具體的屬性。





