微信小程序防止重復點擊

有時候，用戶點擊按鈕或控件時，如果響應比較慢或者網速差，往往會重復多次點擊，當然也有一部分想要找茬的用戶故意反復快速點擊，導致多次觸發點擊事件造成非期望的結果。為了避免這個問題，大致分這兩種解決方式

1.點擊事件是執行請求

這種情況下可以在請求執行之前顯示一個模式的加載框，請求完成后再關閉加載框，由於小程序在1.1.0版本基礎庫才支持wx.showLoading，因此需要對低版本做兼容處理，代碼如下，我們可以將顯示加載框和關閉加載框的代碼放在公共的代碼里面比如util，然后在使用時直接調用即可。

function showLoading(message) {
  if (wx.showLoading) {
    // 基礎庫 1.1.0 微信6.5.6版本開始支持，低版本需做兼容處理
    wx.showLoading({
      title: message,
      mask: true
    });
  } else {
    // 低版本采用Toast兼容處理並將時間設為20秒以免自動消失
    wx.showToast({
      title: message,
      icon: 'loading',
      mask: true,
      duration: 20000
    });
  }
}

function hideLoading() {
  if (wx.hideLoading) {
    // 基礎庫 1.1.0 微信6.5.6版本開始支持，低版本需做兼容處理
    wx.hideLoading();
  } else {
    wx.hideToast();
  }
}

　module.exports = {
　　showLoading:showLoading,
　　hideLoading:hideLoading
　}

2、點擊事件是頁面跳轉
當點擊事件是頁面跳轉時，不太適合顯示加載框，但小程序的頁面跳轉並不是很快，如果不作處理又會導致用戶反復點擊打開多個頁面，這里可以使用限制按鈕或控件的點擊間隔的方式處理，同樣可以將這個方法放到公共的代碼里面比如util，然后在使用時直接調用即可。

function buttonClicked(self) {
  self.setData({
    buttonClicked: true
  })
  setTimeout(function () {
    self.setData({
      buttonClicked: false
    })
  }, 500)
}
module.exports = {
  buttonClicked:buttonClicked
}

首先需要在頁面對應的js文件里面增加一個buttonClicked數據對象，然后在點擊事件里面調用上述方法。

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    util.buttonClicked(this);
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
})