WXML模板语法

1、数据绑定

1.1 数据绑定的基本原则

• 在data中定义数据
• 在WXML中使用数据

1.2在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中即可

Page({
	data:{
	//字符串类型的数据
	info:'init data',
	//数组类型的数据
	msgList:[{msg:'hello'},{msg:''world}]
	}
})
1
2
3
4
5
6
7
8

1.3 Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。

<view>{{要绑定的数据名称}}view>
1

1.4 Mustache语法的应用场景

• 绑定内容
  动态绑定内容

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

<view>{{ info }}view>
1
2
3
4
5
6
7
8

• 绑定属性
  动态绑定属性

Page({
	data:{
		imgSrc:'地址'
	}
})


<image src="{{imgSrc}}">image>	
1
2
3
4
5
6
7
8
9

• 运算（三元运算、算术运算等）
  三元运算

Page({
	data :{
		randomNum:Math.random()*10
		
	}
})

<view>{{ randomNumber >=15?'随机数大于或等于15':'随机数小于15'}}view>
1
2
3
4
5
6
7
8
9

1.5 算数运算

Page({
	data :{
	
		randomNum:Math.random().toFixed(2)
	}
})

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

1
2
3
4
5
6
7
8
9
10

2、事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务处理

2.1 小程序常用的事件

2.2事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，

2.3 target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例

点击内部的按钮时，点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。
此时，对于外层的view来说:

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的view组件

2.4 bindtap的语法格式

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

• 通过 bindtap，可以为组件绑定tap触摸事件，语法如下:

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

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

 Page({
	btnTapHandler(e) {//按钮的 tap事件处理函数
		console.log(e)//事件参数对象e
		}
})
1
2
3
4
5

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

通过调用this.Data(dataObject)方法，可以给页面data中的数据重新赋值

Page({
  data :{
    count:0
  },
  //修改count的值
  changeCount(){
    this.setData({
      count: this.data.count + 1
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11

2.6 事件传参

小程序中事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数，例如，下面代码不能正常工作

<button type="primary" bindtap='bthHandler(123)'>事件传参button>
1

因为小程序会把bindtap的属性值，统一当做事件名称来处理，相当于要调用一个名称为btnHandler（123）的事件处理函数

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

<button bindtap = "btnHandler" data-info="{(2)}">事件传参button>
1

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

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

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

2.7 bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，

• 通过bindinput，可以为文本框绑定输入事件：

<input bindinput="inputHandler">input>
1

• 在页面的.js文件中定义事件处理函数

inputHandler(e){
//e.detail.value是变化过后，文本框最新的值
	console.log(e.detail.value)
}
1
2
3
4

2.8 实现文本框和data之间的数据同步

实现步骤

• 定义数据

Page({
	data :{
		mag:'你好'
	}
})
1
2
3
4
5

• 渲染结构

<input value="{{msg}}" bindinput="iptHandler">input>
1

• 美化样式

input{
	border:1px solid #eee;
	padding:5px;
	margin:5px;
	border-radius:3px;
}
1
2
3
4
5
6

• 绑定input事件处理函数

iptHandler(e){
	this.setData({
		msg:e.detail.value
	})
}
1
2
3
4
5

3、条件渲染

3.1、wx:if

• 在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">Tureview>
1

• 也可以用wx:elif和wx:wlse来添加else判断

<view wx:if="{{type === 1}}">男view>
<view wx:else="{{}type === 2}">女view>
<view wx:else>保密view>
1
2
3

3.2、结合使用wx:if

如果要一次控制对个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用wx;if控制属性，示例

<block wx:if="{{true}}">
	<view>view1view>
	<view>view2view>
block>
1
2
3
4

注意：并不是一个组件，它是一个包裹性质的容器，不会在页面中做任何渲染

3.3、在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏：

<view hidden="{{ condition}}">条件为 true 隐藏，条件为 false 显示view>
1

3.4、wx:if 与 hidden的对比

• 1、运行方式不同
  • wx:if以动态创建和移除元素的方式，控制元素的显示与隐藏
  • hidden以切换样式的方式（display:none/block;），控制元素的显示与隐藏
• 2、使用建议
  • 频繁切换时，建议使用hidden
  • 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

4、列表渲染

4.1 wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例

<view wx:for="{{array}}">
	索引是：{{index}} 当前项是：{{item}}
view>
1
2
3

默认情况下，当前循环项的索引用index表示；当前循环项用item表示

4.2、*手动指定索引和当前项的变量名

• 使用wx:for-index可以指定当前循环项的索引的变量名
• 使用wx:for-item可以指定当前项的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
	索引是：{{idx}} 当前项是：{{itemName}}
view>
1
2
3

4.3、wx:key的使用

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表指定唯一的Key值，从而提高渲染的效率，示例

data:{
	userList:[
		{id:1,name:'小红'}
		{id:2,name:'小黄'}
		{id:3,name:'小白'}
	]
}
<view wx:for="{{userList}}" wx:key="id">{{item.name}}view>
1
2
3
4
5
6
7
8