1. 在 WXML 文件中綁定事件

  1. 簡單點擊事件 假設有一個按鈕，當用户點擊時觸發一個函數。在 wxml 文件中：
<view class="container">
  <button bindtap="handleClick">點擊我</button>
</view>

這裏 bindtap 是微信小程序中綁定點擊事件的方式，handleClick 是我們定義在 Page 或 Component 中的處理函數名。

  1. 傳遞參數 如果你想在點擊時傳遞一些參數，可以這樣做：
<view class="container">
  <button bindtap="handleClick" data - param="someValue">點擊我傳遞參數</button>
</view>

data - param 是自定義的數據屬性，其值 someValue 會在事件處理函數中被獲取。

2. 在 Page 或 Component 中定義事件處理函數

在 Page 中定義

在對應的 js 文件中（假設是 pages/home/home.js）：

Page({
  handleClick: function (e) {
    console.log('按鈕被點擊了');
    // 獲取傳遞的參數
    const param = e.currentTarget.dataset.param;
    console.log('傳遞的參數是:', param);
  }
});

e.currentTarget.dataset 可以獲取到在 wxml 中通過 data - 前綴定義的屬性值。

在 Component 中定義

如果你是在自定義組件中綁定事件，假設組件目錄為 components/my - component，my - component.js 文件內容如下：

Component({
  properties: {},
  methods: {
    handleClick: function (e) {
      console.log('組件內按鈕被點擊了');
      const param = e.currentTarget.dataset.param;
      console.log('傳遞的參數是:', param);
    }
  }
});

同時在 my - component.wxml 中：

<view class="my - component">
  <button bindtap="handleClick" data - param="componentValue">組件內點擊按鈕</button>
</view>

並且在使用該組件的頁面 wxml 中引入組件：

<view class="page">
  <my - component></my - component>
</view>

還要在使用組件的頁面 json 文件中聲明組件：

{
  "usingComponents": {
    "my - component": "/components/my - component/my - component"
  }
}

除了點擊事件 bindtap，微信小程序還有其他常用事件，如 bindtouchstart（觸摸開始）、bindtouchmove（觸摸移動）、bindtouchend（觸摸結束）等