微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

异常描述：

点击按钮获取用户手机号码，有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗，这种情况下，也会出现点击穿透的问题（详见：微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理）

异常解析：

1. getPhoneNumber的使用：

对于 getPhoneNumber(OBJECT) API，由于小程序需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 <button> 组件的点击来触发（具体使用方法详见 getPhoneNumber(OBJECT) ）。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> </button> 

对于使用方法，官方文档是这么说的：

需要将 <button> 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

2. getPhoneNumber函数的执行时间：

由粗体部分内容可知 bindgetphonenumber 绑定的是 open-type 为 getPhoneNumber 的按钮触发调用获取用户手机号API的回调事件事件，而非单击事件。

经验证，从按钮点击到回调事件响应是有一定延迟的，而且会受网络及微信服务器影响（回调事件开头可以写个console.log(e)，就能在开发这工具控制台监控到这个延迟了）。

如果网络非常卡——那么等微信服务器响应的时间可能就比较长了（iphone 6 plus,iphone7 plus比较明显，延迟1000ms以上甚至无反应的感觉）

Page({ 
    getPhoneNumber: function(e) { 
        console.log(e.detail.errMsg) 
        console.log(e.detail.iv) 
        console.log(e.detail.encryptedData) 
    } 
}) 

所以，即使你在 getPhoneNumber 方法中写了loading的代码，也只能等微信服务器响应之后才能生效了，这并不符合我们的需求。那么怎么解决这个问题呢？

解决方法：

方法其实很简单，真的很简单——使用bindtap绑定一个单击事件就可以了。虽然这是一个特殊的按钮，但本质上还是一个按钮的，单击事件仍然是有的。

被官方文档误导了，一直强调getPhoneNumber 这个绑定的回调事件，且在取消、确认授权及获取加密数据操作都是在这个事件中处理的，潜意识中已经以为这就是这个特殊按钮单击事件了。

给getPhoneNumber 按钮绑定一个单击事件,如下：

<buttonopen-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" bindtap='showLoading' 
style='background: url({{btnImg}})  top center no-repeat;background-size:cover;border:0px;color:#ffffff;' plain="true">获取用户手机号码</button>

  /**
   * 获取手机号码单击事件（在回调事件之前执行，预先显示loading,防授权弹窗弹出延迟）
   * loading使用自定义组件（小程序原生loading加载有延迟，无法完全防止点击穿透）
   */
  showLoading:function(){
    this.setData({
      loading: true
    })
  }

如此，问题解决，在点击按钮的时候，就能及时显示loading。

个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt/p/9729578.html