一、WXML模板语法
1 数据绑定
1、数据绑定的基本原则
- 在data中定义数据
- 在WXML中使用数据
2、在data中定义页面的数据
在页面对应的.js文件中，把数据定义到data对象中即可：
3、Mustache语法格式
把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式：
<view>{{info}}</view>
4、Mustache语法的应用场景
Mustache的语法应用场景如下：
- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算等）
5、动态绑定内容
页面数据如下
Page({
data: {
// 字符串类型数据
info:"init data",
// 数组类型的数据
msgList:[{msg:'hello'},{msg:'word'}]
}
}
页面结构如下
<view>{{info}}</view>
6、动态绑定属性
页面数据如下
Page({
data: {
imgSrc:'../images/yan.jpg'
}
}
页面结构如下
<image src="{{imgSrc}}"></image>
7、三元运算
页面数据如下
Page({
data: {
randomNum:Math.random()*10
}
}
页面结构如下
<view>{{randomNumber>=5?"随机数大于或等于5":"随机数小于5"}}</view>
查看所有数据
8、算数运算
页面数据如下
Page({
data: {
randomNum:Math.random().toFixed(2)//生成带两位小数的随机数
}
}
页面结构如下
<view>生成100以内的随机数：{{randomNum*100}}</view>
2 事件绑定
1、什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理
2、小程序中常用的事件
3、事件对象的属性列表
当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：
4、target和currentTarget的区别
target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件
点击内部按钮，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。
此时，对于外层的view来说：
- e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
- e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件
5、bindtap的语法格式
在小程序中，不存在HTML中的onclick鼠标点击事件，而通过tap事件来响应用户的触摸行为。 （1）通过bindtap，可以为组件绑定tap触摸事件，语法：
Page({
btnTapHandler(e)
{//按钮tap事件处理函数
console.log(e)//事件参数对象e
}
}
（2）在页面.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：
<button type="primary" bindtap="btnTapHandler">按钮</button>
6、在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例： 页面数据如下
Page({
data: {
count:0
},
//修改count的值，+1按钮的点击事件处理函数
CountChang(){
this.setData({
count:this.data.count+1
})
},
}
页面结构如下
<button type="primary" bindtap="CountChang">+1</button>
7、事件传参
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作
<button type="primary" bindtap='btnHandler(123)'>事件传参</button>
因为小程序会把bindtap的属性值，统一当做事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数。
正确方法：
可以为组件提供data-自定义属性传参，其中*代表的是参数名字，例如：
<button bindtap="btnHandler" data-info="{{2}}>事件传参</button>
最终：
info会被解析为参数名字数值
2会被解析为参数的值
在事件处理函数中，通过event.target.dataset.参数名，即可获取到具体参数的值，例如：
<!-- 如果为data-info="2"则是字符串 -->
<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>
Page({
btnTap2(e){
console.log(e);
},
}
给上面的count赋新的值
Page({
btnTap2(e){
// console.log(e);
this.setData({
//this.data.count为旧值
// e.target.dataset.info为新值
count:this.data.count + e.target.dataset.info
})
},
}
