微信小程序 button按钮怎么触发事件? bindtap语法怎么使用?

在前端网页中我们需要触发一个事件如果按钮点击后调用函数,文本、图片、链接被点击后调用一个函数一个事件,我们都知道用click,可是微信小程序中的click是不存在的,他怎么才能和网页中一样的使用click的呢?

1.bindtap语法的使用

这时候有人肯定会问,我不是来学习click的怎么教我bindtap语法使用了?

其实不然,bindtap是微信小程序中的onclick鼠标点击事件

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

①通过bindtap,可以为组件绑定tap触摸事件,语法如下:

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

 ②在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接收:

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

我们尝试需要点击按钮输出e里面是啥

我们会看多很多参数,这时候不用怕,我给大家讲解一些常用的。

属性类型说明基础库版本
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

 2.1.type属性

我们从图书看出在bindtap事件中他返回的是tap,其实我们事件有很多种

 以上三种是我们最常见的,是否还有其他属性我们可以前往微信小程序帮助文档进行查看

2.2.timeStamp属性

这个属性就是代表我们WXML页面从打开后开始计时,到事件被触发为止显示的一个时间戳

单位时毫秒

 2.3 target属性

target属性是我们最长用到的属性,所以我给他标红了,

看图明白一个大概,后面实战种使用到我们会详细讲解,现在都做一个了解

2.4  currentTarget属性

  currentTarget属性和target属性其实是一样的,但是他有一个小小的区别

看图我们是不是以为 他们2个没有区别数据都是一样的,其实currenttarget属性是指向当前组件的父组件,

我们会在后面推文种写出他两的本质区别,可以进入主页进行查看文章

2.5 touches和changedtouches属性

其实他们两个属性也是一样的道理,一句话概括他们, 当用户进行多个手指触摸屏幕会留下痕迹,被这两个属性记录,然后返回给后台。

### 微信小程序按钮点击事件的源码实现 在微信小程序开发中,`bindtap` 是用于绑定点击事件的一个属性。当用户点击某个组件(如按钮)时,会触发事件并执行指定的函数。 以下是 `wx.bindtap` 的具体实现方式以及一个完整的代码示例: #### 绑定点击事件的基本语法 在 WXML 文件中,可以通过设置 `bindtap="functionName"` 来绑定点击事件到特定的 JavaScript 函数上[^1]。这里的 `functionName` 需要在对应的 JS 文件中的 Page 定义部分声明。 #### 示例代码 ##### WXML 文件 ```xml <!-- index.wxml --> <view class="container"> <button bindtap="handleClick">点击我</button> <text>{{message}}</text> </view> ``` ##### WXSS 文件 (可选样式) ```css /* index.wxss */ .container { display: flex; justify-content: center; align-items: center; height: 100vh; } button { padding: 10px 20px; font-size: 16px; } ``` ##### JS 文件 ```javascript // index.js Page({ data: { message: '初始状态' }, handleClick() { // 对应 wxml 中的 bindtap 属性所指向的方法名 this.setData({ // 更新页面上的数据 message: '按钮被点击了!' }); console.log('按钮已被点击'); // 打印日志以便调试 } }); ``` 在这个例子中,当用户点击 `<button>` 元素时,`handleClick` 方法会被调用,并更新视图中的 `{{message}}` 数据。 --- ### 注意事项 - **方法名称匹配**:WXML 文件中的 `bindtap` 值必须与 JS 文件中定义的方法名称一致。 - **setData 使用**:如果需要动态改变界面上的内容,则需通过 `this.setData()` 进行操作。 - **事件对象传递**:默认情况下,事件处理函数会接收到一个参数 event,它包含了当前事件的相关信息。例如,可以获取目标元素的信息或者自定义数据。 --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值