微信小程序按钮绑定带参数函数的实现方法

微信小程序的事件绑定逻辑和普通HTML/JS确实不一样，不能直接在事件属性里写函数传参，得用小程序的dataset机制来实现，具体做法如下：

1. WXML 按钮布局 #

给每个按钮绑定同一个点击事件，同时用data-*属性存储要传递的城市参数：

<button bindtap="handleGetWeather" data-city="New York">New York</button>
<button bindtap="handleGetWeather" data-city="Toronto">Toronto</button>

这里的data-city是自定义参数字段，小程序会自动把所有data-开头的属性收集到事件对象的dataset中。

2. JS 逻辑处理 #

在对应页面的JS文件中，定义事件处理函数handleGetWeather，通过事件对象获取传递的城市参数，再调用你的getWeather函数：

Page({
  // 自定义的获取天气函数
  getWeather(city) {
    console.log(`获取${city}的天气数据`);
    // 这里写实际的天气请求逻辑
  },

  // 按钮点击事件处理函数
  handleGetWeather(e) {
    // 从dataset中取出城市参数
    const city = e.currentTarget.dataset.city;
    // 调用getWeather并传参
    this.getWeather(city);
  }
})

关键说明 #

• 小程序的事件绑定（比如bindtap）不支持直接写handleGetWeather('New York')这种传参写法，必须通过dataset传递参数。
• 优先用e.currentTarget而非e.target获取参数：如果按钮内部有嵌套元素，target可能指向子元素，而currentTarget始终指向绑定事件的按钮本身，能确保正确拿到data-city的值。

内容的提问来源于stack exchange，提问作者xpt