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

长风清留扬2024-12-10 9:48

🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容

🌸个人主页： 长风清留杨的博客

🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。

✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战

🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

WXML 模板语法

事件绑定

什么是事件

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

事件的触发与传递

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

小程序中常用的事件

类型 绑定方式 事件描述
tap bindtap 或 bind:tap 用户点击时触发，适用于按钮、图片等可点击元素
longtap bindlongtap 或 bind:longtap 用户长按时触发，适用于需要用户长时间按压的场景
touchstart bindtouchstart 或 bind:touchstart 手指触摸开始时触发
touchmove bindtouchmove 或 bind:touchmove 手指触摸后移动时触发
touchend bindtouchend 或 bind:touchend 手指触摸结束时触发
touchcancel bindtouchcancel 或 bind:touchcancel 手指触摸被打断（如来电）时触发
input bindinput 或 bind:input 文本框内容改变时触发，常用于获取用户输入的内容
change bindchange 或 bind:change 组件状态改变时触发，如单选框、复选框、滑动条等组件的值改变
submit bindsubmit 或 bind:submit 表单提交时触发，常用于收集用户输入的数据
reset bindreset 或 bind:reset 表单重置时触发，常用于清空表单中的数据
confirm bindconfirm 或 bind:confirm 弹出框（如模态框）确认按钮被点击时触发
cancel bindcancel 或 bind:cancel 弹出框（如模态框）取消按钮被点击时触发
scroll bindscroll 或 bind:scroll 页面或组件滚动时触发，常用于实现滚动监听
swipe bindswipe 或 bind:swipe 用户快速滑动时触发，常用于实现轮播图等滑动效果

事件对象的属性列表

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

属性名 数据类型 说明
type string 事件类型
timeStamp number 触发事件的时间戳
target object 触发事件的源头组件
currentTarget object 当前绑定事件处理函数的组件
detail object 事件的附加数据，根据具体事件类型不同而不同
touches array 触摸事件时，当前触摸点列表
changedTouches array 触摸事件时，发生变化的触摸点列表
targetTouches array 触摸事件时，目标元素上的触摸点列表

其中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文件

xml 复制代码 
<button type="primary" bindtap="btnTapHandler">按钮</button>

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

index.js文件

javascript 复制代码 
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文件：

xml 复制代码 
<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文件：

javascript 复制代码 
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的变化

事件传参(错误示范)

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

xml 复制代码 
<button type="primary" bindtap="btnHandler(666)">事件传参</button>

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

事件传参(正确示范)

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

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

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

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

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

index.wxml文件

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

index.js文件

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

bindinput 的语法格式

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

index.wxml文件

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

xml 复制代码 
<input bindinput="input_username"></input>

index.js文件

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

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

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

(1)定义数据：

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

javascript 复制代码 
Page({
  data: {
    inputValue: '' // 初始化为空字符串
  }
})
(2)渲染结构：

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

xml 复制代码 
<input type="text" value="{{inputValue}}" bindinput="handleInputChange" />

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

(3)美化样式：

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

css 复制代码 
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属性。

javascript 复制代码 
Page({
  data: {
    inputValue: ''
  },
  handleInputChange: function(e) {
    this.setData({
      inputValue: e.detail.value
    });
  }
})

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

(5)结果：

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

相关推荐
GIS好难学1 小时前
《Vue进阶教程》第六课：computed()函数详解(上)
前端·javascript·vue.js
nyf_unknown1 小时前
(css)element中el-select下拉框整体样式修改
前端·css
执键行天涯1 小时前
element-plus中的resetFields（）方法
前端·javascript·vue.js
Days20501 小时前
uniapp小程序增加加载功能
开发语言·前端·javascript
喵喵酱仔__1 小时前
vue 给div增加title属性
前端·javascript·vue.js
界面开发小八哥2 小时前
LightningChart JS助力德国医疗设备商打造高精度肺功能诊断软件
javascript·信息可视化·数据可视化·lightningchart·图表工具
不会玩技术的技术girl2 小时前
使用HTML获取商品详情：技术实现与最佳实践
前端·javascript·html
m0_748233172 小时前
前端好用的网站分享——CSS（持续更新中）
前端·css
carcarrot3 小时前
一些前端组件介绍
前端·javascript
疯狂的沙粒3 小时前
JavaScript 单例模式的创建与应用
开发语言·前端·javascript·vue.js
热门推荐
01Windows11 Copilot助手开启教程(免费GPT-4)02【halcon】halcon字符识别——OCR03玄机平台应急响应—webshell查杀04『手写ahooks系列-useClickAway』一个hook解决监听点击元素外部0504 - matlab m_map地学绘图工具基础函数 - 设置网格06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Python学生信息管理系统（完整代码）08支付宝短视频平台创作分成激励项目09Docker 夺命连环 15 问10MacBook外接键盘修改键位