第6次课 - 事件绑定与页面交互 - 微信小程序开发实战

1

教学目标

掌握小程序事件绑定的方式与类型
理解事件对象的常用属性
掌握setData更新视图数据
能够实现常见的页面交互效果
案例：案例3-1 比较数字大小、案例3-2 计算器

2

重点、难点与课时分配

◎

教学重点

事件绑定、事件对象、setData更新视图

△

教学难点

事件冒泡与捕获、input双向绑定

课时分配（共 3 学时）

理论 1 学时

实践 2 学时

事件机制讲解 1 学时，案例 3-1/3-2 实操 2 学时

3

课件要点

事件绑定方式

bind事件: bindtap / bindinput / bindchange

catch事件: catchtap — 阻止事件冒泡

事件传参: data-* 自定义属性 + e.currentTarget.dataset

注意: bindtap无法直接传参, 需用data-*方式

e.target vs e.currentTarget: target是触发者, currentTarget是绑定者

常用事件类型

tap — 点击事件(最常用)

input — 输入事件(实时触发)

change — 值改变事件

submit — 表单提交事件

scroll — 滚动事件

setData更新数据

this.setData({ key: value }) — 更新数据并刷新视图

setData是异步的, 回调函数可确认更新完成

只更新需要变化的数据(局部更新)

避免频繁调用setData(性能优化)

setData数据量不宜过大

案例3-1 比较数字大小 / 案例3-2 计算器

案例3-1 比较数字大小 — input 收集两个数字，bindtap 触发比较，setData 回显结论

案例3-2 计算器 — 数字键与运算符键共用一个 bindtap，靠 data-key 区分

事件传参：data-key 携带按键值，处理函数中用 e.currentTarget.dataset.key 取出

catchtap 阻止冒泡：防止按键点击穿透到外层容器的点击事件

综合运用事件绑定与 setData 完成两个教材案例

4

代码示例与讲解

事件绑定方式

                event-bind.wxml
                事件绑定效果
              
1<!-- bindtap：冒泡事件绑定 -->
2<view bindtap="handleTap">
3  <text>点击我</text>
4</view>
5
6<!-- catchtap：阻止事件冒泡 -->
7<view bindtap="parentTap">
8  <view catchtap="childTap">
9    子元素（阻止冒泡）
10  </view>
11</view>
12
13<!-- data-* 传参 -->
14<view bindtap="handleItem" data-id="{{item.id}}" data-name="{{item.name}}">
15  {{item.name}}
16</view>
17
18<!-- e.target vs e.currentTarget -->
19// e.target：触发事件的元素（可能是子元素）
20// e.currentTarget：绑定事件的元素（始终是当前元素）
21handleItem(e) {
22  const id = e.currentTarget.dataset.id
23  const name = e.currentTarget.dataset.name
24  console.log(id, name)
25}

微信小程序中，bindtap 是最常用的事件绑定方式，它允许事件冒泡。如果需要阻止冒泡，使用 catchtap。传递参数时，通过 data-* 属性携带数据，在事件处理函数中通过 e.currentTarget.dataset 获取。注意区分 e.target 和 e.currentTarget：target 是实际触发事件的元素，而 currentTarget 是绑定事件的元素，取参数时务必使用 e.currentTarget，避免取到子元素上的数据。

常用事件类型

                events.wxml
                常用事件演示
              
1<!-- tap 点击事件 -->
2<button bindtap="onTap">点击</button>
3
4<!-- input 输入事件 -->
5<input bindinput="onInput" placeholder="请输入" />
6
7<!-- change 改变事件 -->
8<switch bindchange="onSwitch" />
9<picker bindchange="onPickerChange">
10  选择城市
11</picker>
12
13<!-- submit 提交事件 -->
14<form bindsubmit="onSubmit">
15  <input name="username" />
16  <button form-type="submit">提交</button>
17</form>
18
19<!-- scroll 滚动事件 -->
20<scroll-view bindscroll="onScroll" scroll-y>
21  <view>内容1</view>
22  <view>内容2</view>
23</scroll-view>

小程序常用事件有五类：tap 是点击事件，最基础最常用；input 事件在输入框内容变化时触发，通过 e.detail.value 获取输入值；change 事件用于 switch、picker 等组件状态改变时触发；submit 事件配合 form 组件，通过 form-type="submit" 触发，可一次性收集所有表单数据；scroll 事件在 scroll-view 滚动时触发，可用于实现下拉刷新、滚动加载等效果。

setData更新数据

                setData.js
                setData 更新效果
              
1Page({
data: {
  count: 0,
  userInfo: { name: '张三', age: 20 },
  list: []
},
7
// 基本用法：更新单个字段
handleAdd() {
  this.setData({
    count: this.data.count + 1
  })
},
14
// 更新对象中的某个属性（路径写法）
updateName() {
  this.setData({
    'userInfo.name': '李四'
  })
},
21
// 更新数组中某一项
updateListItem() {
  this.setData({
    'list[0]': { id: 1, name: '更新项' }
  })
},
28
// ⚠️ 性能优化：只更新需要变化的数据
// ❌ 不要这样写：整体替换
// this.setData({ list: newList })
// ✅ 应该这样写：只更新变化项
appendList() {
  const key = `list[${this.data.list.length}]`
  this.setData({ [key]: newItem })
}
37})

setData 是小程序更新视图的唯一方式。基本用法是传入一个对象，键为 data 中的字段名，值为新值。更新嵌套对象时，使用路径写法，如 'userInfo.name'。更新数组某项用 'list[0]'。特别注意性能优化：setData 是异步操作，每次调用都会触发视图渲染，所以要避免频繁调用和整体替换大数据，只更新变化的部分。

案例3-1比较数字大小+案例3-2计算器

                compare.wxml
                比较数字 & 计算器
              
1<!-- 案例3-1：比较数字大小 compare.wxml -->
2<view class="container">
3  <input bindinput="onInputNum1" type="number"
4    placeholder="请输入第一个数字" />
5  <input bindinput="onInputNum2" type="number"
6    placeholder="请输入第二个数字" />
7  <button bindtap="compare">比较大小</button>
8  <view>结果：{{result}}</view>
9</view>
10
11// compare.js
12Page({
13  data: { num1: '', num2: '', result: '' },
14  onInputNum1(e) {
15    this.setData({ num1: e.detail.value })
16  },
17  onInputNum2(e) {
18    this.setData({ num2: e.detail.value })
19  },
20  compare() {
21    const { num1, num2 } = this.data
22    if (!num1 || !num2) return
23    const n1 = Number(num1), n2 = Number(num2)
24    const res = n1 > n2 ? `${n1}大于${n2}` : n1 < n2 ? `${n1}小于${n2}` : '两数相等'
25    this.setData({ result: res })
26  }
27})
28
29<!-- 案例3-2：计算器 calc.wxml -->
30<view class="calc">
31  <view class="display">{{display}}</view>
32  <view class="keys">
33    <view wx:for="{{keys}}" wx:key="index"
34      bindtap="onKey" data-val="{{item}}">
35      {{item}}
36    </view>
37  </view>
38</view>

案例3-1比较数字大小：两个 input 通过 bindinput 实时获取输入值存入 data，点击按钮时在 compare 函数中比较大小，用 setData 更新结果显示。案例3-2计算器：使用 wx:for 循环渲染按键，通过 data-val 传参，在 onKey 中根据按键类型（数字、运算符、等号、清除）分别处理，核心是字符串拼接和 eval 计算表达式。

5

课件预览与下载