通过第 2 章的学习，读者已可以在微信小程序项目中实现页面结构和样式效果，但是这些页面并不能进行交互。在实际的微信小程序项目中，用户是可以与微信小程序页面发生交互的，即可以通过触摸、长按等操作实现各种各样的功能。本章将对微信小程序页面交互的相关知识进行详细讲解。

学习目标：

• 熟悉 Page () 函数，能够归纳 Page () 函数及其各个参数的作用
  掌握数据绑定能够运用数据绑定实现页面中数据的显示与修改
• 掌握事件绑定，能够在组件触发时执行对应的事件处理函数
• 熟悉事件对象，能够总结事件对象的属性及其作用
• 掌握 this 关键字的使用，能够运用 this 关键字访问当前页面中的数据或者函数
• 掌握 setData () 方法的使用，能够完成数据的设置与更改
  掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件
• 掌握 <block> 标签，能够运用 < block > 标签同时显示或隐藏多个组件
• 熟悉 hidden 属性，能够区分其与 wx:if 控制属性的区别
• 掌握 data-* 自定义属性，能够完成 data-* 自定义数据的设置与获取
• 掌握模块的使用能够完成模块的创建和引入
• 掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中
• 掌握网络请求的实现，能够通过网络请求与服务器进行交互
• 掌握提示框的实现，能能够在页面中显示消息提示框
• 掌握 WXS 的使用，能够运用 WXS 处理页面中的数据
• 掌握上拉触底的实现，能够运用上拉触底实现数据的动态加载
• 掌握下拉刷新的实现，能够运用下拉刷新实现数据的重新加载
• 掌握双向数据绑定，，能够运用双向绑定实现数据的动态更改、

# 1.Page () 函数

在微信小程序中，页面交互的代码写在页面的 JS 文件中，每个页面都需要通过 Page () 函数进行注册。需要注意的是，Page () 函数只能写在微信小程序每个页面对应的 JS 文件中，并且每个页面只能注册一个。

Page () 函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。调用 Page () 函数的示例代码如下

Page({

    // 页面初始数据

    data: {},

    // 页面生命周期回调函数，以 onLoad () 为例

    onLoad: function () { console.log('onLoad()函数执行了') },

    // 页面事件处理函数，以 onPullDownRefresh () 为例

    onPullDownRefresh: function () { 

        console.log('onPullDownRefresh()函数执行了') }

})

# 页面初始数据

data: {

    msg1: 'Hello', 

    msg2: 'World'

},

# 页面生命周期回调函数

在微信小程序中，页面的生命周期是指每个页面 “加载→渲染→销毁” 的过程，每个页面都有生命周期。

如果想要在某个特定的时机进行特定的处理，则可以通过页面生命周期回调函数来完成。

页面生命周期回调函数用于实现在特定的时间点执行特定的操作，随着页面生命周期的变化，页面生命周期回调函数会自动执行。

页面生命周期回调函数如下表所示

# 页面事件处理函数

在微信小程序中，用户可能会在页面上进行一些操作，例如上拉、下拉、滚动页面等，如何在发生这些操作的时候进行处理呢？可以通过页面事件处理函数来完成。

页面事件处理函数用于监听用户的行为。

常见的页面事件处理函数如下表所示:

# 2. 数据绑定

微信小程序提供了 Mustache 语法（又称为双大括号语法）用于实现数据绑定 ， 可 将 data 中 的 数 据 通 过 Mustache 语法输出到页面上。

通过数据绑定将数据显示在页面中案例：

1. 打开 pages/index/index.js 文件，在 data 中定义一个 message 数据。

   	Page({
   	data: {
   	message: 'Hello World'
   	}
   	})

2. 在 pages/index/index.wxml 文件中编写页面结构。

   	<view></view>
   	<!-- 通过 Mustache {} 语法将 data 中的数据显示在页面中 -->

页面上显示了 message 变量对应的值，也就是把 “Hello World” 渲染到页面代码中所在的位置，实现了从逻辑层到视图层的数据显示。

# 3. 事件绑定

在微信小程序中，事件是视图层到逻辑层的通信方式，通过给组件绑定事件，可以监听用户的操作行为，然后在对应的事件处理函数中进行相应的业务处理。例如，为页面中的按钮绑定事件，当用户点击按钮时，就产生了事件。

在微信小程序中，常见的事件如下表所示：

事件分类：

• 冒泡事件：指当一个组件上的事件被触发后，该事件会向父组件传递。
• 非冒泡事件：指当一个组件上的事件被触发后，该事件不会向父组件传递。

注意：点击事件、长按事件、触摸事件都属于冒泡事件，其他事件属于非冒泡事件。

组件绑定事件

• 若要为组件绑定事件，可以通过为组件添加 “bind + 事件名称” 属性或 “catch + 事件名称” 属性来完成，属性的值为事件处理函数，当组件的事件被触发时，会主动执行事件处理函数。

bind 和 catch 的区别在于，bind 不会阻止冒泡事件向上冒泡，而 catch 可以阻止冒泡事件向上冒泡。

为组件绑定事件案例：

1. 在 pages/index/index.wxml 文件中给 button 组件绑定 tap 事件，事件处理函数为 compare () 函数。

   <button bindtap="compare">比较</button>

   bindtap 表示绑定 tap 事件。
   在触屏手机中，tap 事件在用户手指触摸 button 组件离开后触发，而在微信开发者工具中，tap 事件在鼠标单击 button 组件时触发。

2. 在 pages/index/index.js 文件的 Page ({}) 中定义 compare () 函数。

   	compare: function () {
   	console.log('比较按钮被点击了')
   	},

事件处理函数的简写形式

由于 compare () 函数是 {} 对象的方法，所以可以将 compare () 函数写成方法的简写形式，即省略 compare 后面的冒号和 function 关键字

示例代码如下

compare () {

  console.log('比较按钮被点击了')

},

# 4. 事件对象

概念：在开发微信小程序的过程中，有时需要获取事件发生时的一些信息，例如事件类型、事件发生的时间、触发事件的对象等，此时可以通过事件对象来获取。

当事件处理函数被调用时，微信小程序会将事件对象以参数的形式传给事件处理函数。

事件对象的属性：

事件对象的使用

1. 修改 pages/index/index.js 文件中的 compare () 函数，通过参数接收事件对象，并将事件对象输出到控制台。

   	compare: function (e) {
   	console.log(e)
   	// 函数参数 e 表示事件对象
   	},

2. 单击 “比较” 按钮，控制台中输出的结果如下图所示。

   从上图中可以看出，控制台成功输出了事件对象的相关信息

target 属性和 currentTarget 属性

事件对象属性中的 target 和 currentTarget 属性的对比。

• target 表示获取触发事件的组件的一些属性值集合
• currentTarget 表示获取当前组件的一些的属性值集合

事件对象属性中 target 和 currentTarget 的区别案例：

1. 在 pages/index/index.wxml 文件中编写页面结构。

   	<view bindtap="viewtap" id="outer">
   	outer
   	<view id="inner">
   	inner
   	</view>
   	</view>

2. 在 pages/index/index.js 文件中添加 viewtap () 事件处理函数。

   	viewtap: function (e) {
   	console.log(e.target.id + '-' + e.currentTarget.id)
   	},

   使用 e.target.id 或 e.currentTarget.id 都可以获取发生事件的组件的 id，由于 outer 和 inner 的 id 不同，因此可以区分这两个组件。

   运行程序测试，当单击 outer 时，控制台中的输出结果为 outer-outer，而单击 inner 时，控制台中的输出结果为 inner-outer。

   由此可见，e.target 获取的是子元素的属性值集合，而 e.currentTarget 获取到的是父元素的属性值集合。

# 5.this 关键字

在微信小程序开发过程中，有时需要在函数中访问页面中定义的一些数据，或者调用页面中定义的一些函数，此时可以通过 this 关键字来实现。

this 关键字代表当前页面对象。

this 关键字的使用

Page({

   data: { num: 1 },		// 定义 data 数据

   test: function () {		// 定义 test () 函数

     console.log('test()函数执行了')

  }, 

    onLoad: function () {

        console.log(this.data.num)	

        // 通过 this 关键字访问 data 中的 num 数据

        this.test()			

        // 通过 this 关键字调用 test () 函数

  }

})

# 6.setData () 方法

在微信小程序开发过程中，虽然通过数据绑定可以将 data 中定义的数据渲染到页面，但是如果数据发生了变化，页面并不会同步更新数据。

为了实现在数据变化时使页面同步更新，微信小程序提供了 setData () 方法，该方法可以立即改变 data 中的数据，并通过异步的方式将数据渲染到页面上。

setData () 方法通过 this 关键字调用，该方法的基本语法格式如下：

this.setData(data[, callback])

setData () 方法的参数

注意：

• 第 1 个参数 data 是 object 类型的数据，以 key: value 的形式将 data 中的 key 对应值设置成 value；
• 第 2 个参数 callback 是回调函数，可以省略。

setData () 方法的使用：

1. 在 pages/index/index.js 文件中编写页面中所需的数据 message 和事件处理函数 changeText ()。

   	Page({
   	data: { message: 'Hello World' },
   	changeText: function () {
   	this.setData({ message: 'hello 微信小程序' })
   	}
   	})

2. 在 pages/index/index.wxml 文件中编写页面结构。

   <view bindtap="changeText"></view>

   给 view 组件绑定了 tap 事件，事件处理函数为 changeText ()

3. 运行代码，在微信开发者工具中单击前和单击后的页面效果如下图所示

# 7. 条件渲染

在微信小程序开发过程中，如果需要根据不同的判断结果显示不同的组件，可以使用条件渲染来实现。

条件渲染通过标签的 wx:if 控制属性来完成。

使用 wx:if=“” 来判断是否需要渲染标签对应的组件，如果变量 val 的值为 true，则渲染组件并输出；变量 val 的值为 false，则不渲染组件

示例代码如下：

<view wx:if="">True</view>

通过变量 condition 的值来控制是否渲染 view 组件

给标签设置了 wx:if 控制属性后，可以为后面的标签设置 wx:elif、wx:else 控制属性。

• wx:elif 控制属性表示当前面标签的 if 条件不满足时，继续判断 elif（else if）的条件；
• wx:else 控制属性表示当前面的 if 条件不满足时，渲染 else 对应的组件。
• wx:else 控制属性也可以直接出现在 wx:if 控制属性的后面

示例代码如下：

<view wx:if="false">0</view>

<view wx:elif="false">1</view>

<view wx:else>2</view>

#8. <block> 标签

通过 <block> 标签可以创建一个容器，该标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接收控制属性。

<block> 标签的示例代码如下

<block wx:if="true">

    <view>view1</view>

    <view>view2</view>

</block>

<block> 标签中 wx:if 控制属性的值为 true，在页面上会渲染出 < block > 组件内部的两个 view 组件

# 9.hidden 属性

除 wx:if 控制属性外，hidden 属性也可以控制组件的显示与隐藏，条件为 true 时隐藏组件

里面的内容，条件为 false 时显示组件里面的内容，示例代码如下

<text hidden="">hidden为true时不显示</text>

hidden 与 wx:if 的区别：

• wx:if 控制属性的初始渲染条件为 false，只有条件第一次变为 true 的时候才开始渲染，hidden 属性所在的组件始终会被渲染，只是简单的控制显示与隐藏。
• wx:if 控制属性有更大的切换开销而 hidden 属性有更高的初次渲染开销。
• 在需要频繁切换显示和隐藏的情境下用 hidden 更好，而如果运行时条件不太可能会改变则用 wx:if 控制属性更好

# 10.data-* 自定义属性

微信小程序可以通过自定义属性来进行传参。

微信小程序中的 data-* 是一个自定义属性，data-* 自定义属性实际上是由 data - 前缀加上一个自定义的属性名组成的，属性名中如果有多个单词，用连字符 “-” 连接。

data-* 自定义属性的属性值表示要传参的数据。

在事件处理函数中通过 target 或 currentTarget 对象的 dataset 属性可以获取数据。

dataset 属性是一个对象，该对象的属性与 data-* 自定义属性相对应。

通过设置 data-* 自定义属性实现参数的传递：

1. 在 pages/index/index.wxml 文件中编写页面结构。

   	<view bindtap="demo" data-name="xiaochengxu" data-age="6">
   	获取姓名和年龄
   	</view>
   	<view>姓名：</view>
   	<view>年龄：</view>

2. 在 pages/index/index.js 文件中编写页面逻辑。

   	Page({
   	data: { name: '初始名字', age: 0 },
   	demo: function (e) {
   	this.setData({
   	name: e.target.dataset.name,
   	age: e.target.dataset.age
   	})
   	}
   	})

3. 在微信开发者工具中，单击 “获取姓名和年龄” 前后的对比如下图所示

# 11. 模块

在微信小程序中，为了提高代码的可复用性，通常会将一些公共的代码抽离成单独的 JS 文件，作为模块使用，每个 JS 文件均为一个模块

微信小程序提供了模块化开发的语法，可以使用 module.exports 语法对外暴露接口，然后在需要使用模块的地方通过 require () 函数引入模块

创建和引入模块案例：

1. 创建模块。在项目的根目录下创建一个 utils 目录，用于保存项目中的模块，然后在该目录下创建 welcome.js 文件。

   	module.exports = {
   	message: 'welcome'
   	}

   使用 module.exports 语法暴露了一个对象，作为模块使用

2. 引入模块。在页面的 JS 文件中使用 require () 函数将模块引入。

   	var welcome = require('../../utils/welcome.js') Page({
   	onLoad: function () {
   	console.log(welcome.message)
   	}
   	})

   require () 函数的参数是模块的路径，并且需要使用相对路径，不能使用绝对路径，否则会报错。模块路径中，文件扩展名 “.js” 可以省略

# 12. 列表渲染

列表渲染通过 wx:for 控制属性来实现。

微信小程序进行列表渲染时，会根据列表中数据的数量渲染相应数量的内容。

在 wx:for 控制属性所在标签的内部，可以使用 item 变量获取当前项的值，使用 index 变量获取当前项的数组索引或对象属性名。

如果不想使用 item 和 index 这两个变量名，还可以通过 wx:for-item 控制属性更改 item 的变量名；通过 wx:for-index 控制属性更改 index 的变量名。

wx:key 控制属性

• wx:for 控制属性通常搭配 wx:key 控制属性使用。
• wx:key 控制属性用于为每一项设置唯一标识，这样可以在数据改变后页面重新渲染时，使原有组件保持自身的状态，而不是重新创建，这样可以提高列表渲染的效率。

设置 wx:key

1. 如果 item 本身就是一个具有唯一性的字符串或数字，则可以将 wx:key 的值设置为 * this，*this 表示 item 本身。
2. 如果给定的数据是一个由对象作为数组元素构成的数组，那么可以将 wx:key 的值设置为对象中的一个 “值具有唯一性” 的属性的名称。

数组的列表渲染案例：

1. 在 pages/index/index.js 文件的 Page ({}) 中编写页面数据。

   	data: {
   	arr: [ 'a', 'b', 'c']
   	}

2. 在 pages/index/index.wxml 文件中编写页面结构，通过列表渲染的方式将 arr 数组渲染到页面中。

   	<view wx:for="" wx:key="*this">
   	</view>

数组中包含对象情况下的列表渲染案例：

1. 在 pages/index/index.js 文件的 Page ({}) 中编写页面数据。

   	data: {
   	list: [
   	{ message: '梅' , id: 1 }, { message: '兰' , id: 2 },
   	{ message: '竹' , id: 3 }, { message: '菊' , id: 4 }
   	]
   	}

   id 是每条数据的唯一标识

2. 在 pages/index/index.wxml 文件中编写页面结构，将 list 数组中的数据在页面中显示出来。

   	<view wx:for="" wx:key="id">
   	-----=======
   	</view>

   数组中包含对象情况下的列表渲染的页面效果如下图所示：

3. 在 pages/index/index.wxml 文件中修改页面结构，实现通过 wx:for-item、wx:for-index 更改 item 和 index 的变量名。

   	<view wx:for="" wx:for-item="item2" wx:for-index="index2" wx:key="id">
   	：
   	</view>
   	<!-- 通过 wx:for-item 更改 item 的变量名为 item2，通过 wx:for-index 更改 index 的变量名为 index2 -->

   更名后列表渲染的页面效果如下图所示：

# 13. 网络请求

客户端与服务器进行交互时，客户端请求服务器的过程称为网络请求。

例如，获取用户的头像信息，需要客户端向服务器发送请求，服务器查询到数据后把数据传递给客户端。

在微信小程序中实现网络请求时，需要服务器给微信小程序提供服务器接口。

在微信小程序中发起网络请求可以通过调用 wx.request () 方法来实现。

wx.request () 方法的常见选项

注意：method 选项的合法值包括 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE 和 CONNECT，具体使用哪个，以服务器接口的要求为准。

每个 wx:request () 方法都是一个请求任务，可以通过 abort () 方法将其取消。

示例代码如下：

// 发起网络请求

var requestTask = wx.request({

  url: 'URL地址',

  //wx.request () 的常见参数……

})

// 取消请求任务

requestTask.abort()

// 调用 wx.request () 方法发起网络请求

// 调用 abort () 方法取消请求任务

通过 wx.request () 方法发起一个 GET 方式的请求

wx.request({

  url: 'URL地址',   // 表示服务器接口地址

  method: 'GET',     // 表示 HTTP 请求方式为 GET

  data: { name: 'zs' },   // 设置了请求参数 name

  success: res => {

    console.log(res)       // 定义了接口调用成功的回调函数 success 

  }

})

# 14. 提示框

在微信小程序中，如果想实现点击一个按钮弹出

一个提示框的效果，可以使用以下 2 种方式。

① wx.showLoading () 方法

wx.showLoading () 方法用于弹出加载提示框，加载提示框弹出后，不会自动关闭，需要手动调用 wx.hideLoading () 方法才能关闭提示框。

wx.showLoading () 方法的常用选项如下表所示

wx.showLoading () 方法的使用案例

// 用于弹出加载提示框，提示内容为 “加载中”

wx.showLoading({

    title: '加载中',

})

// 用于在 2 秒后关闭加载提示框

setTimeout(function () { 

    wx.hideLoading()

}, 2000)

② wx.showToast () 方法

提示框 wx.showToast () 方法用于显示消息提示框，该方法的常用选项如下表所示

wx.showToast () 方法的使用案例：

wx.showToast({ 

    title: '成功', 

    icon: 'success', 

    duration: 2000

})

// 设置了消息提示框的内容为 “成功”，图标为 success，提示的停留时间为 2 秒

# 15.WXS

WXS（WeiXin Script）是微信小程序独有的一套脚本语言，可以结合 WXML 构建出页面结构。 WXS 的典型应用场景是 “过滤器”，所谓的过滤器是指在渲染数据之前，对数据进行处理，过滤器处理的结果最终会显示在页面上。

WXS 的特点:

1. WXS 与 JavaScript 不同；
2. WXS 不能作为组件的事件回调；
3. 具有隔离性；
4. 在 iOS 设备上效率高。

为了降低 WXS 的学习成本，WXS 在设计时借鉴了 JavaScript 的语法，但是本质上，WXS 和 JavaScript 本质上是完全不同的两种语言，在使用 WXS 时应该注意以下 3 点。

1. WXS 有 8 种数据类型，包括 number（数值）、string（字符串）、boolean（布尔）、object（对象）、function（函数）、array（数组）、date（日期）、regexp（正则）。
2. WXS 不支持 let、const、解构赋值、展开运算符、箭头函数、对象属性简写等语法，WXS 支持 var 定义变量、普通 function 函数等语法。
3. WXS 遵循 CommonJS 规范。在每个模块内部，module 变量代表当前模块，这个变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口，在使用 require () 函数引用其他模块时，得到的是被引用模块中 module.exports 所指的对象。

WXS 不能作为组件的事件回调 :

• WXS 经常与 Mustache 语法配合使用，但是在 WXS 中定义的函数不能作为组件的事件回调函数。

具有隔离性

隔离性是指 WXS 代码的运行环境和其他 JavaScript 代码是隔离的，体现在以下两方面。

1. 在 WXS 代码中不能调用页面的 JS 文件中定义的函数。
2. 在 WXS 代码中不能调用微信小程序提供的 API。

在 iOS 设备上效率高

• 在 iOS 设备上，微信小程序内 WXS 代码的执行速度比 JavaScript 代码快 2~20 倍；在 Android 设备上，两者的运行效率无差异。

# 16 上拉触底

在原生应用或者网页的交互中，经常会有上拉加载这个功能。用户在浏览列表页面时，手指在手机屏幕上进行上拉滑动操作，通过上拉加载请求数据，增加列表数据。

微信小程序提供了 onReachBottom () 事件处理函数，即页面上拉触底事件处理函数，用于监听当前页面的上拉触底事件。

onReachBottom () 事件处理函数的示例代码如下：

onReachBottom: function () {

    console.log('触发了上拉触底的事件')

},

在默认情况下，触发上拉触底事件时，滚动条距离页面底部的距离为 50px，即上拉触底距离为 50px。在实际开发中，开发人员可以根据实际需求，在全局或页面的 JSON 配置文件中通过 onReachBottomDistance 属性修改上拉触底的距离。

在页面的 JSON 文件中配置上拉触底的距离为 200px：

{  

    "onReachBottomDistance": 200

}

# 17 下拉刷新

在原生应用的交互中，经常会有下拉刷新操作，即当用户下拉页面到达顶部时，再进行下拉可以将数据重新加载。

启用下拉刷新的方式:

1. 全局开启下拉刷新
   • 在 app.json 文件的 window 节点中，将 enablePullDownRefresh 设置为 true。
2. 局部开启下拉刷新
   • 在页面的 JSON 文件中，将 enablePullDownRefresh 设置为 true。

开启下拉刷新后，当下拉操作执行时，就会触发 onPullDownRefresh () 事件处理函数。

onPullDownRefresh () 事件处理函数的示例代码如下。

onPullDownRefresh: function () {

  console.log('触发了下拉刷新的事件') 

}

执行下拉刷新操作后，页面顶部会出现加载提示，并且页面需要延迟一段时间才会弹回去。

为了优化用户体验，可以在完成下拉刷新的数据加载后，立即调用 wx.stopPullDownRefresh () 方法停止使用当前页面的下拉刷新加载效果

示例代码如下：

wx.stopPullDownRefresh()