零基础微信小程序开发——WXML 模板语法之事件绑定（保姆级教程+超详细）

WXML 模板语法

事件绑定

什么是事件

在小程序开发中，事件是渲染层（Webview）到逻辑层（JsCore）的通讯方式。简单来说，当用户与小程序界面进行交互时（如点击按钮、滑动页面等），这些交互行为会被捕获并转化为特定的事件。这些事件随后被发送给逻辑层，逻辑层接收到事件后，会根据预定义的回调函数来处理这些事件，并执行相应的业务逻辑。

事件的触发与传递

1. 触发事件：用户在渲染层与小程序界面进行交互，如点击按钮，这个行为会触发一个事件。
2. 事件传递：触发的事件会从渲染层被发送到逻辑层。这个过程中，事件携带了触发它的用户行为信息，如点击的位置、点击的元素等。
3. 逻辑层处理：逻辑层接收到事件后，会根据预定义的回调函数来处理这个事件。回调函数定义了当事件发生时应该执行的操作，这些操作可以是更新界面、调用API等。

小程序中常用的事件

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下

其中target和detail是比较常用的

target 和 currentTarget 的区别

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。 首先设置了一个view组件，然后在view组件中嵌套了一个button组件，通过bindtap给view组件绑定了一个outerHandler(手指触摸事件)

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。（也就是说当点击按钮的时候，首先触发按钮的事件，然后会进行扩散，触发view组件的事件） 此时，对于外层的 view 来说：

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件(也就是说先点击的按钮，先触发的是按钮操作，所以按钮是源头组件)
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件（因为先触发的button组件，然后再粗发view组件，所有当前正在触发的组件是view组件）

bindtap 的语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。

通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：

index.wxml文件

<button type="primary" bindtap="btnTapHandler">按钮</button>

在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收：

index.js文件

Page({
    btnTapHandler(e){
        console.log(e)
    }
  })

然后再页面上点击按钮，查看Console中捕捉到的事件

捕捉到的事件：

1. type:
   • 值：“tap”
   • 说明：表示事件类型是点击事件。
2. timeStamp:
   • 值：13170578
   • 说明：表示事件触发的时间戳，这个值通常用于比较事件的先后顺序。
3. target:
   • 说明：触发事件的节点对象。
   • 包含字段：
     • id: “”（节点ID，此处为空）
     • offsetLeft: 103（节点相对于其最近的具有定位（positioned）父节点的水平偏移量）
     • offsetTop: 91（节点相对于其最近的具有定位（positioned）父节点的垂直偏移量）
     • dataset: {…}（节点的自定义数据集合）
4. currentTarget:
   • 说明：绑定事件的当前组件对象。在事件捕获和冒泡阶段，currentTarget始终指向事件绑定的组件，而target指向触发事件的节点。
   • 包含字段与target相同，说明此处事件直接绑定在了触发节点上。
5. detail:
   • 说明：事件的详细信息。
   • 包含字段：
     • x: 213.66015625（点击事件在组件内的相对X坐标）
     • y: 110.08984375（点击事件在组件内的相对Y坐标）
6. mark:
   • 值：{}
   • 说明：用于传递一些额外的信息，此处为空。
7. mut:
   • 值：false
   • 说明：通常用于表示事件是否由用户交互触发，此处表示事件是由用户交互触发的（但这里的命名和常规理解有些出入，常规上应该是true表示由用户触发，具体含义可能依赖于小程序框架的实现）。
8. changedTouches:
   • 说明：包含了所有触发了当前事件的触摸点（Touch objects）的数组。
   • 包含字段：{…}（具体字段取决于触摸事件的具体实现）
9. touches:
   • 说明：包含了当前在屏幕上的所有触摸点（Touch objects）的数组。
   • 包含字段：{…}（具体字段取决于触摸事件的具体实现）
10. _relatedInfo:
    • 说明：这是一个非标准字段，可能是小程序框架或特定组件自定义添加的。
    • 包含字段：
      • anchorTargetText: “按钮”（触发事件的节点文本）
      • anchorRelatedText: “”（与触发事件相关的其他文本，此处为空）
      • anchorTapTime: 1733147444414（触发事件的时间戳，可能是毫秒级时间）
11. _allowWriteOnly, _requireActive, _userTap:
    • 这些字段可能是框架内部使用的，用于控制事件的处理流程或行为。

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

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

index.wxml文件：

<button type="primary" bindtap="changeC">加1</button>
<view class="container">
  <!-- 动态绑定文本 -->
  <text>当前用户名：{{count}}</text>
</view>

1. 按钮 (<button>)：
   • type=“primary”：设置按钮的类型为“primary”，这通常意味着按钮会有一种醒目的样式（如蓝色背景），以突出显示。
   • bindtap=“changeC”：这是一个事件绑定，当用户点击这个按钮时，会触发 changeC 方法。这个方法定义在 index.js 文件中。
2. 视图容器 (<view>) 和文本 (<text>)：
   • <view class="container">：定义了一个类名为 container 的视图容器，用于包裹内部的文本元素。
   • <text>当前用户名：{{count}}</text>：这里使用了数据绑定（{{count}}），它会显示 index.js 文件中 data 对象中 count 属性的值。

index.js文件：

Page({
    data:{
        count:0
    },
    changeC(){
        this.setData({
            count:this.data.count+1
        })
    }
  })

1. 数据 (data)：
   • count: 0：定义了一个名为 count 的数据属性，初始值为 0。这个属性用于存储和显示计数器的值。
2. 事件处理方法 (changeC)：
   • changeC() 方法是一个事件处理函数，当按钮被点击时，这个方法会被调用。
   • this.setData({ count: this.data.count + 1 })：这行代码用于更新 count 的值。setData 方法是小程序提供的用于更新页面数据的方法。这里它将 count 的值增加 1。

在小程序（如微信小程序）的开发中，this.setData({}) 是一个非常重要的方法，它用于更新页面数据并触发页面的重新渲染。

当你调用 this.setData(object) 时，你实际上是在告诉小程序框架：“我想更新这些数据，并且希望页面能够反映出这些变化。

this.data.count表示获取到当前页面上count的值

下面结果图中注意页面上的数字变化，和右下角中的AppData中count的变化

在这里插入图片描述

事件传参(错误示范)

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作

<button type="primary" bindtap="btnHandler(666)">事件传参</button>

定义了一个按钮，在按钮中定义了一个点击事件，事件中直接给btnHandler加上括号里面加入了666这个参数，这样是不可以的！小程序会把btnHandler(666)当做事件的名称，不会把括号里面的当成参数

事件传参(正确示范)

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

<button type="primary" bindtap="btnHandler" data-age="{{2}}">事件传参</button>

定义了一个按钮(button)，设置了一个点击事件，名称为btnHandler，然后定义了一个参数，参数的名称是age，值是2,设置参数的时候使用的是Mustache 语法的格式{{}}，如果不使用Mustache 语法的格式那么参数就是字符串的格式，使用了在里面写一个2，那么就是数字格式

事件传参(获取事件参数的值)

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

index.wxml文件

<button type="primary" bindtap="user_age" data-age="{{2}}">查看年龄</button>

index.js文件

Page({
    user_age(event){
        console.log("获取所有参数：",event.target.dataset)
        console.log("当前用户的年龄是：",event.target.dataset.age)
    }
  })

bindinput 的语法格式

在小程序中，通过 input 事件来响应文本框的输入事件

index.wxml文件 定义一个bindinput，绑定文本框的输入事件，名称为input_username

<input bindinput="input_username"></input>

index.js文件

Page({
    input_username(e){
        // e.detail.value 每次都会获取文本框中最新的值
        console.log(e.detail.value)
    }
  })

我先输入一个张，然后输入一个三，然后再输入一个李，然后再输入一个四，可以看到，每次都是获取到最新的输入内容

实现文本框和 data 之间的数据同步

(1)定义数据：

在小程序页面的data对象中，我们需要定义一个属性来存储文本框中的值。这个属性可以是任意名称，但最好能够反映其用途，比如inputValue。

Page({
  data: {
    inputValue: '' // 初始化为空字符串
  }
})

(2)渲染结构：

在WXML文件中，我们使用<input>标签来创建一个文本框，并通过value属性绑定到data对象中的inputValue属性。同时，我们需要为<input>标签添加一个bindinput事件监听器，用于捕获用户的输入事件。

<input type="text" value="{{inputValue}}" bindinput="handleInputChange" />

这里，{{inputValue}}是WXML模板语法中的插值表达式，用于将data对象中的inputValue属性值渲染到文本框中。bindinput="handleInputChange"表示当文本框的内容发生变化时，会调用handleInputChange方法来处理这个事件。

(3)美化样式：

虽然这一步不是实现数据同步所必需的，但为了使文本框更加美观，我们可以在WXSS文件中为其添加一些样式。例如，可以设置文本框的宽度、高度、边框、内边距等属性。

input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  padding: 5px;
  box-sizing: border-box;
}

(4)绑定 input 事件处理函数：

在页面的JavaScript文件中，我们需要定义一个名为handleInputChange的方法来处理bindinput事件。这个方法会接收一个事件对象作为参数，我们可以通过这个对象的detail.value属性来获取文本框中的当前值。然后，我们使用this.setData方法来更新data对象中的inputValue属性。

Page({
  data: {
    inputValue: ''
  },
  handleInputChange: function(e) {
    this.setData({
      inputValue: e.detail.value
    });
  }
})

在这里，this.setData是一个非常重要的方法，它用于更新页面的数据并触发页面的重新渲染。当我们调用this.setData时，小程序框架会比较新旧数据之间的差异，并只更新那些发生变化的部分，从而提高页面的渲染效率。

(5)结果：

注意看AppData中的内容，变量的值会随着我们的输入实时变化