WXML模板语法

数据绑定

动态绑定内容：

页面数据如下：

Page ({
	data: {
		info: 'init data'
	}
})

页面的结构如下：

<view> {{info}} </view>

动态绑定属性

页面的数据如下：

Page({
	data: {
		imgSrc: 'url'
	}
})

页面的结构如下：

<img src="{{imgSrc}}"></img>

三元运算

页面的数据如下：

Page({
	data: {
		randomNum: Math.random() * 10 //生成十以内的随机数	
	}
})

页面的结构如下：

<view>{{ randomNum >= 5 ? ' 随机数字大于或等于 5 ' : ' 随机数字小于 5 '}}</view>

算术运算

页面的数据如下：

Page({
	data: {
		randomNum: Math.random().toFixed(2) //生成一个带两位小数的随机数
	}
})

页面的结构如下：

<view> 生成 100 以内的随机数： {{randomNum * 100}} </view>

事件绑定

bindtap 的语法格式

在小程序中不存在 HTML 中的 onclick 鼠标点击事件， 而是通过 tap 事件来响应用户的触摸行为。

1. 通过 bindtap, 可以为组件绑定 tap 触摸事件，语法如下：

<button type="primary" bindtap="btnTapHandler"> 按钮 </button>

2. 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参 event(一般简写成 e )来接收

page({
	btnTapHandler(e){  //按钮的 tap 事件处理函数
		console.log(e)//事件参数对象 e
	}
})

在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：

Page({
	data:{
		count: 0
	},
	//修改 count 值
	changeCount(){
		this.setData({
			count: this.count.data + 1
		})
	}
})

事件传参

可以为组件提供data-*自定义属性传参，其中，*代表参数的名字，示例代码如下：

<button bindtap="btnTapHandler" data-info="{{2}}"> 事件传参 </button>

最终：

• info 会被解析为参数的名字
• 数值 2 会被解析为参数的值

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

btnTapHandler(event) {
	//dataset 是一个对象，包含了所有通过 data-* 传递过来的参数项
	console.log(event.target.dataset)
	//通过 dataset 可以访问到具体参数的值
	console.log(event.target.dataset.info)
}