微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

标签：手机号   事件   UNC   防止   style   处理   https   pos   strong   

前言：

　　小程序开发中诸如获取用户手机号码、调起微信支付、领取卡券等api都是会有一定的延迟的。也就是说通过点击按钮调用这些api的时候，从点击按钮调用api，到支付页面或者领取卡券界面展示出来是需要一定时间的,连续点击按钮，还是有可能会重复调用的。

　　虽然这种情况有点极端，正常用户是不会这么连续快速的点击按钮的，但是也不能排除有用户手抖，连续点了两下。如果重复调用的话，不仅体验不好，单击事件中涉及到后端接口操作的也可能引起其他异常。所以这个问题还是要处理下的。

　　刚开始想到的是使用loading开启模板来防止点击穿透，结果发现loading从调用到蒙板起作用也是需要一定时间的，还是解决不了这个问题（自定义loading加蒙板防点击穿透应该可以的）。后边就想到了采用给按钮添加启用/禁用状态来控制按钮点击的频率——点击按钮，按钮状态设置为禁用，一定时间之后，启用按钮可用状态。经多次验证，此法可行。

处理方法：

1. 设置按钮可用状态：

Page({
  data: {
    disabled: false //购买按钮是否可用，按钮默认可用，点击一次后置为不可用，一定时间之后恢复可用
  },
  /**
   * 购买按钮点击防重：禁用/启用
   */
  buyBtnDisable: function() {
    this.setData({
      disabled: true
    })
    var self = this
    setTimeout(function() {
      self.setData({
        disabled: false
      })
    }, 1000)
  }
})

在每一个调用小程序api的按钮单击事件中先调用这个函数，则一定时间之内，这个按钮是禁用状态，就不会再重现重复点及的问题了。

2. 自定义loading:

创建模板或组件loading,在页面中直接使用该模板替代微信loading组件就好了，由于：

loading.wxml

<template name="loading">
<view class=‘loading‘>
<view class=‘bg‘>
  <image src=‘https://lg-gc2dnftu-1257370699.cos.ap-shanghai.myqcloud.com/timg.gif‘ width="100" height="100"></image>
 </view>
</view>
</template>

loading.wxss

.loading{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.bg{
  background: rgba(0,0,0,0.7);
  width:200rpx;
  height:200rpx;  
  margin:50% auto;
  border-radius: 10rpx;
  padding-top:70rpx;
  box-sizing: border-box;
}
.loading image{
  display: block;  
  width:60rpx;
  height:60rpx;
  margin:0 auto;
}

这样就可以使用自定义loading替代微信小程序原生loading了，经验证，此方法能解决多次点击按钮重复调用api的问题。

关于模板具体使用详见：https://www.cnblogs.com/xyyt/p/9559326.html

结语：

　　经验证，上边两种方法都能有效解决按钮连续点击重复调用微信api的问题，且两种方法都需要放在单击事件的开头在单击事件中先行运行。

　　采用设置按钮状态的方法比较独立，只需要在单击事件开头就调用函数就好，函数会在指定时间之后恢复按钮的可点击状态，不会对后续代码有太大影响（但是这种方法会暂时屏蔽按钮的启用状态，指定时间内再次点击是无效的）。

　　采用自定义loading方式是使用蒙版覆盖了按钮，本质上未对按钮做任何修改，只是在loading展示的期间无法点击而已。缺点就是在后续的代码中关闭loading，loading的关闭也是需要一定时间的。如果是调用获取用户手机号码授权的api，取消授权的时候关闭loading,则会在取消之后，loading还会显示一下再消失，体验有点不太好。

综上，上边两种方法各有优劣，可以根据自己的需要选择使用。

微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

标签：手机号   事件   UNC   防止   style   处理   https   pos   strong   

原文地址：https://www.cnblogs.com/xyyt/p/9708770.html