WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
数据绑定
1. 数据绑定的基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据
2.Mustache (双大括号)语法的主要应用场景如下:
绑定内容:{{内容}}
绑定属性:如:src="{{imgSrc}}" ,组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)
运算(三元运算、算术运算等):
3.动态样式:两种写法,用[ ]包裹或者传统class写法
4.行内样式style:style="font-size:20px;font-family:"宋体";"
事件绑定
除 bind
外,也可以用 catch
来绑定事件。与 bind
不同, catch
会阻止事件向上冒泡。
事件分为冒泡事件和非冒泡事件:
submit
事件,input 的input
事件,scroll-view 的scroll
事件除 bind
和 catch
外,还可以使用 mut-bind
来绑定事件。一个 mut-bind
触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind
绑定函数不会被触发,但 bind
绑定函数和 catch
绑定函数依旧会被触发。
换而言之,所有 mut-bind
是“互斥”的,只会有其中一个绑定函数被触发。
触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind
、capture-catch
关键字,后者将中断捕获阶段和取消冒泡阶段。
1.事件对象的属性
target 和 currentTarget 的区别
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view 的 tap 事件处理函数。
此时,对于外层的 view 来说:
e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件
dataset:事件源组件或当前组件上由data-
开头的自定义属性组成的集合
2、在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值
3、事件传参
可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值
4、 bindinput 的语法格式
① 通过 bindinput,可以为文本框绑定输入事件
② 在事件处理函数中 e.detail.value 是变化过后,文本框最新的值
5、 实现文本框和 data 之间的数据同步
如果使用 this.setData({ value: 'leaf' })
来更新 value
,this.data.value
和输入框的中显示的值都会被更新为 leaf
;但如果用户修改了输入框里的值,却不会同时改变 this.data.value
。
如果需要在用户输入的同时改变 this.data.value
,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model:
前缀:<input model:value="{{value}}" />
1、条件渲染 wx:if wx:elif 和 wx:else <block> 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。 2、列表渲染 wx:for 类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块
wx:key
的值以两种形式提供
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。