微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
异常描述:
点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序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
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法的更多相关文章
- 微信小程序开发——点击按钮退出小程序的实现
微信小程序官方是没有提供退出的API的,但是在navigator这个组件中,是有退出这个功能的:详情参考官方文档:navigator.示例代码:1 navigator open-type=" ...
- 微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)
最近帮人家做一个微信小程序,刚好想熟悉一下.由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式. 后台服务器是windows server,后台程序是.Net WebA ...
- 【微信小程序开发】之如何获取免费ssl证书【图文步骤】
微信小程序要求所有网络请求都走ssl加密,因此我们开发服务端接口需要配置为https 这篇文章介绍一下如何 在 startssl 申请一个免费的ca证书. 1. 打开网站 https://www.s ...
- 微信小程序开发之如何哪获取微信小程序的APP ID
微信小程序的开发工具,在新建项目的时候,默认提示填写APP ID,如果不填写AppID 也是可以本地测试和开发的,但是无法通过手机调试,只能在开发工具里查看 如果需要真机调试微信小程序,需要安装微信6 ...
- [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: ...
- 微信小程序维护登录态与获取用户信息
前言. 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://m ...
- 微信小程序开发——超链接或按钮点击跳转到其他页面失效
1. 超链接导航失效: 小程序规则——wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
- 微信小程序开发——点击防重的解决方案
对于一些涉及后端接口请求的单击事件,不论后端是否做了请求限制,前端还是有必要进行点击防重处理的. 这样既能减少对服务器端的压力,也能有效防止因重复请求而造成一些不可预期的异常. 尤其是接口请求结果处理 ...
- 微信小程序开发之修改和获取变量的值
在小程序开发过程中有两种变量,一种是定义在app,js里面的globalData定义的全局变量,另一种是在各个页面app,data里面的定义的变量. 一:全局变量的定义,获取值,赋值,修改 app.j ...
随机推荐
- git的团队协作开发
title: git的团队协作开发 date: 2018-04-24 14:00:03 tags: [git] --- 项目负责人创建组织架构 在控制面板中点击组织按钮,添加组织,在这里可以把组织理解 ...
- [ilink32 Error] Fatal: Unable to open file 'SDDEBUG.OBJ'
[ilink32 Error] Fatal: Unable to open file 'SDDEBUG.OBJ' 这个路径NativeXml407\general\sdDebug.pas找不到了 修正 ...
- 火狐Firefox浏览器所有历史版本下载地址
Mozilla Firefox 频繁的更新,导致许多好用的插件在更新后不能兼容,而且想换回低版本还不容易啊,官网上只看到最新版本和前一个版本的下载. 这里为大家提供了一个下载链接,是来自Mozilla ...
- 深度学习原理与框架-神经网络-线性回归与神经网络的效果对比 1.np.c_[将数据进行合并] 2.np.linspace(将数据拆成n等分) 3.np.meshgrid(将一维数据表示为二维的维度) 4.plt.contourf(画出等高线图,画算法边界)
1. np.c[a, b] 将列表或者数据进行合并,我们也可以使用np.concatenate 参数说明:a和b表示输入的列表数据 2.np.linspace(0, 1, N) # 将0和1之间的数 ...
- 如何配置windows定时任务
Windows上配置任务定时执行有两种方法.一是通过控制面板中的界面配置,另外一种是通过schtasks命令配置.如果是简单的定时任务配置(比如每天单次执行)建议选择界面的方式,简洁.直观.易上手.如 ...
- Structs复习 简单数据校验
jar包 web.XML <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...
- ubuntu 下 rvm 卸载和重装
卸载: sudo apt-get --purge remove ruby-rvm sudo rm -rf /usr/share/ruby-rvm /etc/rvmrc /etc/profile.d/r ...
- android listview中item通过viewpager实现《IT蓝豹》
android listview中item通过viewpager实现 android listview中item通过viewpager实现,每一个item都支持viewpager实现图片切换功能.本项 ...
- MVC模式浅谈
MVC模式浅谈 一.MVC模式概述 模型-视图-控制器(MVC模式)是一种非常经典的软件架构模式,在UI框架和UI设计思路中扮演着非常重要的角色.从设计模式的角度来看,MVC模式是 一种复合模式,它将 ...
- GBDT+Lr
https://blog.csdn.net/shine19930820/article/details/71713680 http://scikit-learn.org/stable/auto_exa ...