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

目录

一、测试环境

二、问题现象

三、总结


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

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

三、总结

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

相关推荐
流***陌1 天前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB1 天前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域1 天前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗1 天前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_915921432 天前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q19632884752 天前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
韩立学长2 天前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
2501_915918412 天前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview