微信小程序防止多次点击

在使用小程序的时候，如果点击很多次就会有可能导致页面假死甚至崩溃。

1、点击事件是执行网络请求（提交评论，验证码，支付）
这种情况下可以在请求执行之前显示一个模式的加载框，请求完成后再关闭加载框。
，由于小程序在1.1.0版本基础库才支持wx.showLoading，因此需要对低版本做兼容处理，代码如下：

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();
  }
}

我们可以将显示加载框和关闭加载框的代码放在公共的代码里面比如util，然后在使用时直接调用即可。

function request() {
  util.showLoading('加载中...');
  wx.request({
    url: app.globalData.host + 'xxx',
    data: {...},
    method: 'GET',
    success: function (res) {
      util.hideLoading()
      ...
    },
    fail: function (res) {
      util.hideLoading()
      ...
    }
  })
}

2、点击事件是页面跳转 当点击事件是页面跳转时，不太适合显示加载框，但小程序的页面跳转并不是很快，如果不作处理又会导致用户反复点击打开多个页面，这里可以使用限制按钮或控件的点击间隔的方式处理，同样可以将这个方法放到公共的代码里面比如util，然后在使用时直接调用即可。

function buttonClicked(self) {
  self.setData({
    buttonClicked: true
  });

  setTimeout(function() {
    self.setData({
      buttonClicked: false
    });
  }, 500);
}

首先需要在页面对应的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
    });
  }
});

另外，在wxml的点击控件中通过buttonClicked判断是否可以点击，可以用bindtap也可以用disabled

<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />

3.利用css的pointer-events: none来解决

/*

* 如果添加了hover-class属性，

* 在点击时会添加hover-class，并维持400ms后移除

*【注意：对于如果超过400ms仍未跳转的事件不起作用】

* 给这些hover类增加穿透属性，可防止重复点击问题

* 其中xxx-hover为自定义的hover类

*/

.navigator-hover, .xxx-hover {

pointer-events: none; // 点击事件直接穿透到下层元素，即跳过这个链接或者按钮

}

<view class='field' hover-class='navigator-hover' hover-stay-time='默认400，可自行更改' bindtap='test'></view>

<navigator url='xxx'>链接navigator>