微信小程序 按钮点击事件

微信小程序中的点击事件跟vue中的不一样，不是使用@click，而是使用bind:tap

wxml中定义按钮组件

<button bind:tap="onClick">点击</button>

js中定义点击处理事件

// index.js
Page({data: {message: '尚未点击'},onClick() {console.log('按钮被点击了');this.setData({message: '按钮已被点击！'});}
});

点击传参给事件处理

通过data-*属性传参(推荐)

<button bind:tap="addScore" data-type="homeTeam" data-score="3" class="btn score-3">+3</button>

js中获取参数

  addScore(e) {const dataset = e.currentTarget.datasetconst {score,type,} = datasetif (type === 'homeTeam') {this.setData({'homeTeam.score': Number(this.data.homeTeam.score) + Number(score)})}},

• this.setData()用于更新数据并触发页面更新。