目录
WXML 模板语法 - 数据绑定
1. 数据绑定原则
- 在 data 中定义数据
- 在 WXML 中使用数据
2. 在 data 中定义界面的数据
在页面对应的 .js 文件中，把数据定义到 data 对象中即可：
Page({
data: {
// 字符串类型数据
info: 'init data',
// 数组类型的数据
msgList: [{msg: 'hello'}, {msg: 'world'}]
}
})
3. Mustache 语法的格式
把 data 中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格式为：
<view>{{ 要绑定的数据名称 }}</view>4. Mustache 语法的应用场景
- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算等）
1. 动态绑定内容
页面数据如下：
data: {
info: 'hello world'
}页面结构如下：
<view>{{ info }}</view>
2. 动态绑定属性
页面数据如下：
data: {
imgSrc: "https://ts1.cn.mm.bing.net/th/id/R-C.aa4d1570a3f4feb7e21822515f446b2f?rik=XCCPCgOQQJzftQ&riu=http%3a%2f%2fimg.ewang.com%2f5fdab2a3a18b0df50c6b.jpg&ehk=t2d%2bg9CX3n8pErZcDuSfYmbyKoIuoL77V1caqAv1M%2fU%3d&risl=&pid=ImgRaw&r=0"
}页面结构如下：
<image src="{{imgSrc}}" mode="aspectFit"></image>
3. 三元运算
页面数据如下：
data: {
randomNum: Math.random() * 10 // 生成 10 以内的随机数
}页面结构如下：
<view>{{ randomNum >= 5 ? '随机数字大于或等于 5 ' : '随机数字小于 5 '}}</view>
4. 算数运算
页面数据如下：
data: {
randomNum: Math.random().toFixed(2) // 生成一个带两位小数的随机数，例如 0.34
}页面结构如下：
<view>生成 100 以内的随机数：{{randomNum * 100}}</view>
WXML 模板语法 - 事件绑定
1. 小程序常用的事件
| 类型 | 绑定方式 | 事件描述 |
|---|---|---|
| tap | bindtap 或 bind:tap | 手指触摸后马上离开，类似于 HTML 中的 click 事件 |
| input | bindinput 或 bind:input | 文本框的输入事件 |
| change | bindchange 或 bind:change | 状态改变时触发 |
2. 事件对象的属性列表
当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：
| 属性 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合（常用） |
| currentTarget | Object | 当前组件的也写属性值集合 |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组（获得几根手指在屏幕上等...） |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
target 和 currentTarget 的区别
target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。
bindtap 的语法格式
1. 通过 bindtap ，可以为组件绑定 tap 触摸事件，语法如下：
<button type="primary" bindtap="btnTapHandle">按钮</button>2. 在页面 .js 文件中定义对应事件处理函数，时间参数通过形参 event （一般简写成 e ）来接收：
Page({
btnTapHandle(e) {
console.log(e)
}
})
在事件处理函数中为 data 中的数据赋新值
通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：
Page({
data: {
count: 0
},
// 修改 count 的值
changeCount: function() {
this.setData({
count: this.data.count + 1 // this表示Page()
})
}
})<view>{{count}}</view>
<button type="primary" bindtap="changeCount"> 点击加1 </button>
WXML 模板语法 - 事件传参与数据同步
事件传参
为组件提供 data-* 自定义属性传参，其中 * 表示的是参数的名字，示例代码如下：
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>- info 会被解析为参数的名字
- 数值 2 会被解析为参数的值
在事件处理函数中，通过 event.target.dataset.参数名 即可获取具体参数的值，示例代码如下：
btnHandler: function(event) {
// dataset 是一个对象，包括了所有通过 data-* 传递过来的参数项
console.log(event.target.dataset)
// 通过 dataset 可以访问到具体参数的值
console.log(event.target.dataset.info)
},
示例：
bindinput 的语法格式
在小程序中，通过 input 事件来响应文本框的输入事件， 语法格式如下：
1. 通过 bindinput，可以为文本框绑定输入事件：
<input type="number" bindinput="inputHandler" />2. 在页面的 .js 文件中定义事件处理函数 ：
inputHandler: function(e) {
// e.detail.value 是变化过后，文本框最新的值
console.log(e.detail.value)
}
实现文本框和 data 之间的数据同步
实现步骤
- 定义数据
- 渲染结构
- 美化样式
- 绑定 input 事件处理函数
.js 中定义数据
Page({
data: {
msg: "你好，"
},
})
.wxml 中渲染结构
<input type="text" value="{{msg}}" bindinput="iptHandler"/>.wxss 中美化样式
input {
border: 1px solid #eee;
padding: 5px;
margin: 5px;
border-radius: 3px;
}.js 中绑定 input 事件处理函数
Page({
data: {
msg: "你好，"
},
iptHandler(e) {
this.setData({
msg: e.detail.value
})
},
})
示例：
WXML 模板语法 - 条件渲染
1. wx:if
在小程序中，使用 wx:if="{{condition}}"来判断是否需要渲染改代码块：
<view wx:if="{{condition}}"> True </view>也可以用 wx:elif 和 wx:else 来添加 else 判断：
<view wx:if="{{type === 1}}"> 男 </view>
<view wx:elif="{{type === 2}}"> 女 </view>
<view wx:else> 保密 </view>
2. 结合 <block> 使用 wx:if
如果要一次性使用多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在 <block> 标签上使用 wx:if 控制属性，示例如下：
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>*注：<block> 标签只起到包裹的作用，在实际渲染中并不会显示。
3. hidden
在小程序中，直接使用 hidden="{{condition}}" 也能控制元素的显示与隐藏：
<view hidden="{{condition}}">条件为 true 隐藏，条件为 false 显示 </view>4. wx:if 与 hidden 的对比
1. 运行方式不同
- wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
- hidden 以切换样式的方式（display: none/block;）,控制元素的显示与隐藏
2. 使用建议
- 频繁切换时，建议使用 hidden（减少性能消耗）
- 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
WXML 模板语法 - 列表渲染
1. wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
<view wx:for="{{array}}">
索引是：{{index}} 当前项是：{{item}}
</view>
默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。
2. 手动指定索引和当前项的变量名
- 使用 wx:for-index 可以指定当前循环项的索引的变量名
- 使用 wx:for-item 可以指定当前项的变量名
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}} 当前项是：{{itemName}}
</view>
3. wx:key 的使用
类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，示例代码如下：
// data数据
data: {
userList: [
{id: 1, name: '小红'},
{id: 2, name: '小黄'},
{id: 3, name: '小白'},
]
},
// wxml 结构
<view wx:for="{{userList}}" wx:key="id">
{{item.name}}
</view>
没有 id 也可以用默认的 index 当作 key 值