目录
一、WXML模板语法--数据绑定
(一)数据绑定的基本原则
1、在data中定义数据
(1)在页面对应的.js文件中,把数据定义到data对象当中
(2)把data中的数据绑定到页面中渲染,使用mustache语法将变量包起来
格式:<view>{{绑定数据的名称}}</view>
(3)mustache语法应用场景
- 绑定属性
- 绑定内容
.js文件
data{
message:'hello'
}
.wxml文件
<view>{{message}}</view>
- 运算(三元、算术运算)
二、WXML模板语法--事件绑定
事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
(一)常用事件
类型 | 绑定方式 | 事件描述 |
tap | bindtap或bind:tap | 触碰后离开 |
input | bindinput或bind:input | 文本框的输入事件 |
change | bindchange或binf:change | 状态改变时触 |
(二)事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象的event,它的详细属性如下表:
属性 | 类型 | 说明 |
type | String | 事件类型 |
timeStamp | Integer | 页面的打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTargett | Object | 当前组件的属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
1、target与currentTarget的区别
target是指出该事件的源头组件,而currentTarget则是当前事件所绑定的组件
2、bindtap的语法格式
通过tap事件来响应用户的触摸行为。
wxml文件中
<button type="primary" bind:tap="btnTapHandler">按钮</button>
js文件中
btnTapHandler(e){
console.log(e)
}
3、在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法,给页面data中的数据重新赋值。
三、WXML模板语法--事件传参
小程序当中的事件传参,不能绑定事件的同时又给事件处理函数传递参数。如果要实现这一功能,需要借助data-*在定义属性传参,其中*代表的是参数的名字。在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值。
(一)bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入事件,示例如下:
四、WXML模板语法--数据同步
实现文本框和data之间的数据同步
步骤:
(一)定义数据
(二)渲染结构
(三)美化样式
(四)绑定input事件处理函数
五、WXML模板语法--条件渲染
(一)wx:if
在小程序中,使用wx:if="{{condition}}"来判断是否需要渲该代码块,还可以用wx:elif 和wx:else来添加else判断。
(二)结合<block>使用wx:if
若要一次性控制多个组件的展示和隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在<block>标签上使用wx:if控制属性。
*<block></block>不会对页面进行任何渲染
(三)hidden
在小程序,直接使用hidden=”{{condition}}“也能控制元素的显示与隐藏
wx:ify与hidden的区别
- wx:if是以动态创建和移除元素的方式来控制元素的显示隐藏
- hidden是以切换样式的方式(display:none/block),来控制元素的显示或者隐藏
- 频繁切换时,建议使用hidden
- 控制条件复杂时,建议使用wx:if搭配wx:elif、wx:else进行显示和隐藏的切换
六、WXML模板语法--列表渲染
(一)wx:for
通过wx:for可以根据指定的数组,循环渲染重复的组件结构
(二)手动指定索引和当前项的变量名
- 使用wx:for-index可以指定当前循环项的索引的变量名
- 使用wx:for-item可指定当前项的变量名
(三)wx:key
类似vue中的:key,wx:key的作用
- 在使用wx:for循环渲染列表时,为每个列表项提供一个唯一的标识符。它可以是列表中每个元素的唯一标识符,也可以是元素中的某个属性的值。
- 帮助微信小程序在重绘列表时能够准确、高效地识别出哪些列表项发生了变化,从而避免重新渲染整个列表,提升性能。如果不使用wx:key或者没有提供唯一的标识符,微信小程序会发出警告并且重新渲染整个列表。