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