微信小程序开发2

WXML模板语法

一、数据绑定

①数据绑定的基本原则

1）在data中定义数据
2）在WXML中使用数据

②在data中定义页面的数据

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

③Mustache语法的格式

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

④Mustache语法的应用场景

1）绑定内容
2）绑定属性
3）运算（三元运算、算术运算等）

—动态绑定内容

—动态绑定属性

—三元运算

二、事件绑定

①事件的定义

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

②小程序中常用的事件

类型	绑定方式	事件描述
tap	bindtap	手指触摸后马上离开，类似于HTML中的click事件
input	bindinput	文本框的输入事件
change	bindchange	状态改变时触发

③事件对象的属性列表

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

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息（包括组件的更新值的信息）
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

④target和currentTarget的区别

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

⑤bindtap语法格式

1）通过bindtap为组件绑定tap触摸事件，类似于Java中的绑定事件监听器

2）在页面的.js文件中定义对应的事件处理函数，类似于Java写自定义的函数体，函数名在微信小程序中是由程序员自定义的。

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

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

------自定义属性的语法格式 ：变量名 : { }
------自定义普通变量的语法格式 ： { 普通变量名 ： value }

⑦事件传参

------注意：事件处理函数的声明与函数形参的传递不能同时进行，也不能一起coding。
------先绑定事件（定义事件处理函数名），再使用 **data-自定义参数名={{value}}**的方式传参

⑧bindinput的语法格式

⑨实现文本框的数据同步

—定义数据
—渲染结构
—美化样式
—绑定input事件处理函数

二、条件渲染

① **–wx:if=“{{condition}}”–或者–wx:elif=“{{condition}}”–或者–wx:else–**判断是否渲染该代码块

②结合使用wx:if

—可以使用一个标签将多个组件包装起来，一次性控制多个组件的展示与隐藏，并在标签里使用wx:if条件属性
—注意：并不是一个组件，只是一个有着包裹性质的容器，不会在页面中做任何渲染

③hidden="{{condition}}"也能控制元素的显示与隐藏

④wx:if 与hidden的对比

1）运行方式不同
wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden以切换样式的方式，控制元素的显示与隐藏

三、列表渲染

①wx.for

—作用 : 通过wx.for可以根据指定的数组，循环渲染重复的组件结构
—关键字： index ： 索引 item ： 当前循环项

②wx：key的使用

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