微信WXML文件属于微信视图层显示文件,实际上是一段被微信封装过的H5代码,最终也是显示在微信界面上,它的动态数据来自对应Page的data数据。
例如:(在wxml中显示我的头像,对应于page中的data数据(userInfo)),最终显示效果如下图。
<!--pages/start/index.wxml-->
<view class="userinfo">
<view class="userinfo-avatar-group">
<image src="{{userInfo.avatarUrl}}"></image>
<text>大师</text>
</view>
</view>
// pages/start/index.js
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {}
},
})
如何使用:
需要将要显示的内容放入到双引号之内<image src="{{userInfo.avatarUrl}}"></image>
这里我们可以使用组件属性,控制属性,直接使用关键字,逻辑运算,三元运算,算数运算,字符串运算,数组,组合等等
例如:
<button style='background:{{tilesData[index].color}};
width:{{itemSize.width - 2}}rpx;
height:{{itemSize.height-2}}rpx;
line-height: {{itemSize.height-2}}rpx;'
data-id="{{index}}"
disabled='{{!tilesData[index].enable}}'
bindtap='clickMapItem'>
{{tilesData[index].value == 0 ? "" : tilesData[index].value}}
</button>
当Page中的data数据有更改的时候,wxml就会更新上面的数据显示。
使用setData动态更新
this.setData({
tilesData: this.data.tilesData,
itemSize: itemSize,
score: 1,
});
我们可以直接使用this.data.itemSize = itemSize
,这样设置会讲data中的itemSize变量的值更改,但是不会在wxml中显示出来,所以还需要setData,将需要变更的动态数据传递给wxml,wxml才会显示出来。