微信小程序模板与设置WXML实例讲解

一、WXML模板语法--数据绑定

数据绑定的基本原则

在 data 中定义数据

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

使用Mustache语法（）将data中的数据绑定到页面中并进行渲染：

Mustache语法可以用于动态绑定内容、绑定属性和进行数据运算（三元运算、算术运算等）

二、WXML模板语法--事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理，类似于html中有一个点击事件onclick，这个点击事件对应的行为方法是getData’,当用户在渲染层点击getData方法时，逻辑会根据getDta方法中的内容进行数据处理。

小程序常用绑定事件

小程序常用事件对象的属性列表

注意：target和currentTarget的区别：target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件，只对当前组件有用。

bindtap的语法格式

小程序中没有htnl中的onclick点击事件，通过tap事件响应用户的行为，通过bindtap为用户绑定btnTapHandler事件示例如下：

事件传参

微信小程序不能在绑定时间的额时候，同时为事件处理函数传参。因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数。微信小程序传参的正确方法应该时为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，如:

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

bindinput的语法格式

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

通过 bindinput，可以为文本框绑定输入事件：

在页面的.js文件中定义事件处理函数：

案例一：实现文本框和data之间数据同步

步骤：定义数据->渲染结构->美化样式->绑定input事件处理函数

三、WXML模板语法--条件渲染

1、wx:if

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

也可以用 wx:elif 和 wx:else 来添加 else 判断：

2、结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在<block> 标签上使用 wx:if 控制属性，block是一个包裹性质的容器，不对页面进行任何渲染，示例如下：

3、hidden隐藏

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：

注意：wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏 hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏. 需要频繁切换时，建议使用 hidden 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

四、WXML模板语法--列表渲染

1、wx:for遍历数组

2、手动指定索引和当前项的变量名*

使用 wx:for-index 可以指定当前循环项的索引的变量名

使用 wx:for-item 可以指定当前项的变量名

3、wx:key的使用

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