微信小程序手机号快速验证组件调用方式

目录

一、测试环境

二、问题现象

三、总结


手机号验证组件(包括快速验证组件和实时验证组件)调用后无法对事件进行回调这个问题,先说结论,以下是正确的使用方式:

html 复制代码
<!-- 手机号快速验证组件 -->
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
<!-- 手机号实时验证组件 -->
<button open-type="getRealtimePhoneNumber" @getrealtimephonenumber="getPhoneNumber"></button>

一、测试环境

windows10

微信开发者工具(1.06.2307260win32-x64) 基础库(3.0.1[1028])

iPhone XR(IOS 15.2.1)

微信(8.0.40)

HBuilder X(3.8.12.20230817)

二、问题现象

最近微信官方更新了手机号获取组件,获取手机号组件从8月26日已经开始收费,具体信息参考官方文档,我们采用的是手机号实时验证组件,官方给出的例子是:

html 复制代码
<button open-type="getRealtimePhoneNumber" bindgetrealtimephonenumber="getrealtimephonenumber"></button>

使用uniapp开发的小程序,以前用的手机号获取组件,现在叫手机号快速获取组件,名字变了,调用方式有变化,但是以前的方式还可以使用:

html 复制代码
<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授权获取手机号</button>

按照官方例子修改以前的方式:

html 复制代码
<button open-type="getRealtimePhoneNumber" @bindgetrealtimephonenumber="onGetPhoneNumber">授权获取手机号</button>

结果在开发者工具上没有任何反应,网上搜索,在微信开放社区中的一篇文章介绍:

没有@符号, 这个方法还有版本要求,并且还可以用wx.canIUse("button.open-type.getRealtimePhoneNumber") 来判断一下是否支持,按照介绍修改代码并在onLoad中增加判断

javascript 复制代码
onLoad() {
    console.log(wx.canIUse("button.open-type.getRealtimePhoneNumber"));
}

控制台打印结果是true,但是测试还是没反应,但是控制台打印出来了另外的信息:

这个方法怎么会没有呢?难道是开发者工具的问题? 遂升级工具版本,还是不行,又在真机上测试,输入短信验证码后还是没反应。难道是uniapp的问题?uniapp官方只有一条提问,还没有人回答。这时候有点烦躁了,喝口水压压惊,这个功能发布了好几个月了,如果时uniapp有问题,应该都炸锅了,冷静思考,代码从头捋一遍,还原为能正常使用的代码(就是以前的方式),然后对比手机号快速验证组件的官方文档,突然发现官方的例子中也没有@符号:

html 复制代码
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

而我的代码有@符号,但是能正常使用,仔细对比发现,@替换了bind,然后修改自己的代码为开头的样子,测试通过,真机也没有问题,发布到正式环境也没有问题。

三、总结

出现这个问题的,最开始使用获取手机号获取组件的时候,代码也是网上直接拷贝的,没有经历这样的过程,看来出来混,迟早是要换的!!!

相关推荐
HerayChen1 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘5 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡8 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼11 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857514 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027714 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__20 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节