小程序-模板与配置-WXML模板语法
WXML模板语法-数据绑定
1.数据绑定的基本原则
(1)在data中定义数据
(2)在WXML中使用数据
2.在data中定义页面的数据
在页面对应的.js文件中,把数据定义到data对象中即可:
Page({
data: {
//字符类型的数据
info: "init data",
//数组类型的数据
msgList: [{msg:'hello'},{msg:'world'}]
}
})
3.Mustache的语法格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为:
<view>{{info}}</view>
4.Mustache语法的应用场景
应用场景如下:
绑定内容,绑定属性,运算(三元运算,算数运算等)。
5.动态绑定内容
页面的数据如下:
Page({
data: {
info: "init data",
}
})
页面的结构如下:
<view>{{info}}</view>
6.动态绑定属性
页面的数据如下:
Page({
data:{
imgSrc:'https://www.itheima.com/images/logo.png'
}
})
页面的结构如下:
<image src="{{imgSrc}}"></image>
7.三元运算
页面数据如下:
Page({
data:{
randomNum:Math.random() * 10
}
})
页面结构如下:
<view>{{randomNum >= 5 ? "该数字大于或等于5":"该数字小于5"}}</view>
8.算数运算
页面的数据如下:
Page({
data:{
randomNum:Math.random().toFixed(2)
}
})
页面结构如下:
<view>{{randomNum2 * 100}}</view>
WXML模板语法-事件绑定
1.什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
2.小程序中的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap或bind:tap | 手指触摸后马上离开,类似html中的click事件 |
input | bindinput或bind:input | 文本框的输入事件 |
change | bindchange或bind:change | 状态改变时触发 |
touchstart | bindtouchstart或bind:touchstart | 手指触摸动作开始触发 |
touchmove | 同上 | 手指触摸后移动 |
touchcancel | 同上 | 手指触摸动作被打断,如来电,显示弹窗 |
touchend | 同上 | 手指触摸动作结束 |
longpress | 同上 | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 最低版本1.5.0 |
longtap | 同上 | 手指触摸后,超过350ms再离开(推荐使用 longpress 事件代替) |
transitionend | 同上 | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 |
animationstart | 同上 | 会在一个 WXSS animation 动画开始时触发 |
animationiteration | 同上 | 会在一个 WXSS animation 一次迭代结束时触发 |
animationend | 同上 | 会在一个 WXSS animation 动画完成时触发 |
touchforcechange | 同上 | 在支持 3D Touch 的 iPhone 设备,重按时会触发 最低版本1.9.90 |
3.事件对象的属性列表
当事件回调被触发的时候,会收到一个事件对象event,它的详细属性如下表所示。
BaseEvent 基础事件对象属性列表:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 事件生成时的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
mark | Object | 事件标记数据 |
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
detail | Object | 额外的信息 |
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
---|---|---|
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
4.traget与currentTarget的区别
target是触发该事件的源头组件,currentTarget是当前事件所绑定的组件。举例如下:
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层的view的tap事件处理函数。此时对于外层的view来说:
e.target指的是触发事件的源头组件,因此e.target是内部的按钮组件。
e.currentTarget是指当前触发事件的那个组件,因此e.currentTarget是当前的view组件。
5.bindtap语法格式
在小程序中,不存在html中的onclick鼠标点击事件,而是通过tap事件来相应用户的触摸行为。
- 通过bindtap,可以为组件绑定tap触摸事件。
<button type="primary" bindtap="bindTapHandler"></button>
- 在页面的.js文件中定义对应的事件处理函数,时间函数通过形参event(e)来接收。
bindTapHandler:function (e) {
console.log(e)
}
6.在事件处理函数中为data中的数据重新赋值
通过调用this.setData(dataObj)方法,可以给页面data中的数据重新赋值。
data:{
myName:"Tom"
},
changeName:function (){
this.setData({
myName:this.data.myName+"and Jerry"
})
7.事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如下面的代码不会正常工作:
<button type="primary" bindtap="bindTapHandler(1234)"></button>
因为小程序会把bindtap的属性值,统一当作事件名称来处理,相当于要调用一个名为bindTapHandler(1234)的处理函数。
可以为组件提供data-自定义属性传参,其中""代表的是参数的名字,示例代码如下:
<button type="primary" bindtap="bindTapHandler" data-info="{{1234}}"></button>
最终:
info会被解析为参数的名字,数值2会被解析为参数的的值。
在事件处理函数中,我们可以通过e.target.dataset.参数名即可获取到具体参数的值,示例代码如下:
btnHandler(e){
//dataset是一个对象,包含了所有通过data-*传递过来的参数项
console.log(e.target.dataset)
//通过dataset可以访问到具体的值
console.log(e.target.dataset.info)
}
8.bindinput的语法格式
在小程序中,通过input事件来相应文本框的输入事件,语法格式如下:
- 通过bindinput可以为文本框绑定输入事件。
<input type="text" bindinput="inputHandler"/>
- 在页面的.js文件中定义事件处理函数。
inputHandler(e) {
//e.detail.value 是变化过后文本框最新的值
console.log(e.detail.value)
}
9.事件文本框与data之间的数据同步
实现步骤:
- 定义数据
Page({
data:{
msg: "Hello world"
}
})
- 渲染结构
<input value="{{msg}}" bindinput="inputHandler" />
-
美化样式
-
绑定input事件处理函数
inputHandler(e) {
this.setData({
msg:e.detail.value
})
}
WXML模板语法-条件渲染
1.wx:if
在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染代码块:
<view wx:if="{{1}}"></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
如果要一次性控制多个组件的展示与隐藏,可以使用一个标签将多个组件包裹起来,并在标签上使用wx:if控制属性,示例如下:
<block wx:if="{{true}}">
<view>
1
</view>
<view>
2
</view>
</block>
注意:并不是一个组件,它只是一个包裹性的容器,不会在页面中做任何渲染。
3.hidden
小程序中,直接使用hidden="{{condition}}"也可以控制元素的显示与隐藏:
<view hidden="{{true}}">
条件为true则隐藏,为false则显示
</view>
4.wx:if与hidden的对比
1.运行方式不同
wx:if以动态创建和移除元素的方式,控制元素的显示与隐藏。
hidden以切换样式的方式(display:none/block),控制元素的显示与隐藏。
2.使用建议
hidden类似于vue中的v-show指令,而wx:if类似于v-if,所以使用建议上跟随vue。
WXML模板语法-列表渲染
1.wx:for
通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
<view wx:for="{{array}}">
s索引项是{{index}},当前项是{{item}}
</view>
默认情况下,当前循环项的索引用index表示;当前循环项用item表示。类似于v-for。
2.手动指定索引和当前项的变量名
使用wx:for-index可以指定当前循环项的索引的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
s索引项是{{idx}},当前项是{{itemName}}
</view>
3.wx:key的使用
类似于vue列表渲染中的key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率,示例代码如下:
data: {
userList:[
{
id:1,
name:"张三"
},
{
id:2,
name:"李四"
},
{
id:3,
name:"王五"
},
{
id:4,
name:"钝角"
}
]
},
<view wx:for="{{userList}}" wx:key="id">
{{index}}{{item.name}}
</view>