微信WXML文件屬于微信視圖層顯示文件,實(shí)際上是一段被微信封裝過的H5代碼,最終也是顯示在微信界面上,它的動(dòng)態(tài)數(shù)據(jù)來自對(duì)應(yīng)Page的data數(shù)據(jù)。
例如:(在wxml中顯示我的頭像,對(duì)應(yīng)于page中的data數(shù)據(jù)(userInfo)),最終顯示效果如下圖。
%20%20 %20%20%20%20%20%20
大師 %20%20%20%20
//%20pages/start/index.jsPage({%20%20/**%20%20%20*%20頁面的初始數(shù)據(jù)%20%20%20*/%20%20data:%20{%20%20%20%20userInfo:%20{}%20%20},})
如何使用:
需要將要顯示的內(nèi)容放入到雙引號(hào)之內(nèi)<img src="{{userInfo.avatarUrl}}" />
這里我們可以使用組件屬性,控制屬性,直接使用關(guān)鍵字,邏輯運(yùn)算,三元運(yùn)算,算數(shù)運(yùn)算,字符串運(yùn)算,數(shù)組,組合等等
例如:
當(dāng)Page中的data數(shù)據(jù)有更改的時(shí)候,wxml就會(huì)更新上面的數(shù)據(jù)顯示。
使用setData動(dòng)態(tài)更新
this.setData({ tilesData: this.data.tilesData, itemSize: itemSize, score: 1, });
我們可以直接使用this.data.itemSize = itemSize,這樣設(shè)置會(huì)講data中的itemSize變量的值更改,但是不會(huì)在wxml中顯示出來,所以還需要setData,將需要變更的動(dòng)態(tài)數(shù)據(jù)傳遞給wxml,wxml才會(huì)顯示出來。
|
新聞熱點(diǎn)
疑難解答
圖片精選