微信小程序开发 学习记录（三）

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 值，从而提高渲染的效率，示例代码如下：