WXML模版语法:
一、数据绑定
1.数据绑定的基本原则:
①在data中定义数据:在页面对应的.js文件中,把数据定义到data数据当中
演示如下:
②在wxml中使用数据
通过Mustache语法格式(双大括号)将变量包起来即可
演示结果如下:
2.Mustache语法应用的场景:
①动态绑定内容:如上图片所示。
②动态绑定属性:(注意:文件路径应当使用/而不是\)
演示效果如下:
③运算(三元运算、算术运算等):
(1)三元运算:
演示效果如下:
(2)算数运算:
在js的定义如下:
演示效果如下:
二、事件绑定
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 事件来响应用户的触摸行为。
①通过bindtap,可以为组件绑定tap触摸事件
演示效果如下,点击一次按钮会在console中打印信息:
6.在事件处理函数中为data中的数据赋值:
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:
点击按钮后再控制台中的AppData中的count会实现+1操作
7.事件传参:
1、小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:
因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。
可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字,示例代码如下:
最终:
- info 会被解析为参数的名字
- 数值 2 会被解析为参数的值
注意若写成data-info=2则会导致被识别为字符串的形式,必须使用Mustache语法。
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:
8.bindinput语法格式:
在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:
①通过bindinput,可以为文本框绑定输入事件:
②在页面的.js文件中定义事件处理函数:
演示效果如下:
9.实现文本框和data之间的数据同步
实现步骤:
①定义数据:
②渲染结构:
③美化样式:
④绑定input事件处理函数:
三、条件渲染
1.wx:if:在小程序中使用wx:if="{{condition}}"来判断是否需要渲染该代码块:
也可以用wx:elif和wx:else来添加else判断:
2.结合<block>使用wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个block 标签将多个组件包装起来,并在 block标签上使用 wx:if 控制属性,示例如下:
注意:<block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中作任何渲染。
3.hidden
在小程序中直接使用hidden="{{condition}}"也能控制元素的显示与隐藏:
4.wx:if和hidden的对比:
①运行方式不同:
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
②使用建议:
频繁切换时,建议使用 hidden
控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
四、列表渲染
1.wx:for
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
2.手动指定索引和当前项的变量名*
- 使用 wx:for-index 可以指定当前循环项的索引的变量名
- 使用 wx:for-item 可以指定当前项的变量名
示例代码如下:
3.wx:key的使用:
类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率,示例代码如下: