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

目录

一、测试环境

二、问题现象

三、总结


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

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,然后修改自己的代码为开头的样子,测试通过,真机也没有问题,发布到正式环境也没有问题。

三、总结

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

相关推荐
编程千纸鹤2 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域3 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java15 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域16 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86816 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650217 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节