注意:小程序获取手机号要收费了——手机号快速验证

在这里插入图片描述

收费说明

自2023年8月26日起,小程序获取手机号组件将需要付费使用

在这里插入图片描述

手机号快速验证组件

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
新版本组件不再需要提前调用wx.login进行登录。

代码示例

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

Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)
  }
})

返回参数说明
code,动态令牌。可通过动态令牌换取用户手机号。使用方法详情phonenumber.getPhoneNumber接口。

请注意:

  1. 目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体);
  2. 该能力使用时,用户可选择绑定号码,或自主添加号码。平台会基于中国三大运营商提供的短信等底层能力对号码进行验证,但不保证是实时验证;
  3. 请开发者根据业务场景需要自行判断并选择是否使用,必要时可考虑增加其他安全验证手段。
  4. 开发者需合理使用,若被发现或用户举报开发者不合理地要求用户提供手机号等个人信息,中断了正常的使用流程,影响了用户的使用体验,微信有权依据《微信小程序平台运营管理规范》对该小程序进行处理。常见违规事例和具体解析;

自2023年8月26日起,手机号快速验证组件将需要付费使用。标准单价为:每次组件调用成功,收费0.03元。

手机号快速验证组件(旧版):https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/deprecatedGetPhoneNumber.html
注意

  1. 目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。
  2. 该能力使用时,用户可选择绑定号码,或自主添加号码。平台会对号码进行验证,但不保证是实时验证;
  3. 请开发者根据业务场景需要自行判断并选择是否使用,必要时可考虑增加其他安全验证手段。

手机号实时验证组件

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getRealtimePhoneNumber.html
代码示例

<button open-type="getRealtimePhoneNumber" bindgetphonenumber="bindgetrealtimephonenumber"></button>

Page({
  getRealtimePhoneNumber (e) {
    console.log(e.detail.code)
  }
})

该能力与手机号快速验证组件的区别为:

  1. 手机号实时验证组件,在每次请求时,平台均会对用户选择的手机号进行实时验证;
  2. 手机号快速验证组件,平台会对号码进行验证,但不保证是实时验证。

请注意:
3. 目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体);
4. 该能力使用时,用户可选择绑定号码,或自主添加号码。每次请求时,平台均会基于中国三大运营商提供的短信等底层能力对号码进行实时验证;
5. 请开发者根据业务场景需要自行判断并选择是否使用,必要时可考虑增加其他安全验证手段。
6. 开发者需合理使用,若用户举报或被发现开发者不合理地要求用户提供手机号等个人信息,中断了正常的使用流程,影响了用户的使用体验,微信有权依据《微信小程序平台运营管理规范》对该小程序进行处理。常见违规事例和具体解析;
7. 该能力的bindgetrealtimephonenumber 事件回调中,仅会返回 code,不会返回 encryptedData,开发者仅可通过消费 code的方式换取用户手机号;

自2023年8月26日起,手机号实时验证组件将需要付费使用。标准单价为:每次组件调用成功,收费0.04元。

付费管理

https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/paymentManage.html

修改建议

想必都已经收到了微信的收费通知
在这里插入图片描述

手机号快速验证组件旧版本接口依然可以使用(不需要改代码),只是需要收费而已,不想做改动的按量购买套餐就行了。如果想用新接口就去改吧,多花一分钱(增强小程序安全性🤔)。

### 微信小程序实现手机号验证码登录功能 #### 服务器端逻辑处理 为了确保用户输入的手机号有效以及安全性考虑,通常会采用后端服务来处理验证码请求。这涉及到创建API接口用于接收客户端发起的获取验证码请求,并向指定手机发送验证码。 ```php // 控制器部分代码片段 namespace app\index\controller; use app\index\model\Phone as PhoneModel; class Login { public function sendCode(Request $request){ // 验证参数合法性 $data = input('post.'); if (!isset($data['mobile']) || !preg_match("/^1[34578]\d{9}$/", $data['mobile'])) { return json(['code'=>0,'msg'=>'请输入有效的手机号']); } // 调用模型层方法生成并保存验证码至缓存中 try{ $result = (new PhoneModel())->sendSmsCode($data['mobile']); if ($result === false) throw new \Exception("发送失败"); return json(['code'=>1, 'msg'=>"发送成功"]); }catch (\Exception $e){ return json(['code'=>0, 'msg'=>$e->getMessage()]); } } } ``` 此段PHP代码展示了如何构建一个简单的API接口[^3],用来接受来自前端提交过来的数据(即手机号),并对这些数据做初步校验;如果合法,则调用`PhoneModel::sendSmsCode()`函数负责实际生成随机验证码并通过第三方服务商将其发送给目标号码,同时把该验证码存储于内存或数据库内以便后续验证操作时对比使用。 #### 客户端页面设计与交互流程 对于微信小程序而言,主要工作集中在WXML文件布局结构的设计上,包括但不限于表单元素、提示文字等UI组件的选择和配置。另外还需要编写JS脚本来完成事件监听任务——例如当用户点击“获取验证码”按钮之后启动定时器模拟等待过程中的视觉反馈机制,防止短时间内重复触发展示错误信息提醒等等行为。 ```html <!-- WXML 文件 --> <view class="container"> <!-- 输入框组 --> <input type="number" placeholder="请输入您的手机号..." bindinput="bindMobileInput"/> <!-- 获取验证码按钮 --> <button wx:if="{{canGetCode}}" formType="submit" catchtap="getCode">获取验证码</button> <text wx:else>{{countdown}} s 后可重新获取</text> <!-- 提交表单按钮 --> <form bindsubmit="loginSubmit"> <input name="sms_code" type="number" placeholder="请输入收到的验证码..." /> <button>立即登录/注册</button> </form> </view> ``` 上述HTML样式的标记语言描述了一个简易版的登录界面模板[^2],其中包含了两个重要的组成部分:“获取验证码”的触发控件及其关联的状态显示区域,还有最终确认身份认证的信息收集区。“获取验证码”环节特别加入了条件渲染语句(wx:if),使得只有满足特定条件下才会呈现正常状态下的CTA(Call To Action),反之则替换为倒计时形式告知当前剩余时间直至允许再次尝试为止。 #### JavaScript业务逻辑控制 最后一步就是利用JavaScript编程语言赋予整个应用动态特性了。这里不仅涵盖了基本的操作如响应触摸动作改变DOM节点属性值之类的常规手段,更重要的是实现了核心算法——基于SetTimeout()循环执行减法运算从而达到逐步减少预设数值的效果,进而驱动视图更新展示最新的进度情况直到结束位置恢复初始形态供下一轮周期继续沿用。 ```javascript Page({ data:{ mobile:'', // 用户填写的手机号 canGetCode:true, // 是否可以获取验证码标志位 countdown:60 // 默认倒计时时长(单位:s) }, onLoad:function(options){ }, onReady:function(){ }, /** * 绑定手机号输入框change事件处理器 */ bindMobileInput(e){ this.setData({mobile:e.detail.value}); }, /** * 处理'获取验证码'按钮click事件 */ getCode(){ const {mobile} = this.data; let that=this; if(!(/^1\d{10}$/.test(mobile))){ wx.showToast({ title:'手机号格式不正确', icon:"none" }); return ; } // 发起网络请求... wx.request({ url:`https://example.com/api/send-code`, // 替换成真实的api地址 method:"POST", header:{'content-type':'application/json'}, data:JSON.stringify({"mobile":mobile}), success(res){ console.log(res); if(res.statusCode===200 && res.data.code==1){ // 开始倒计时 that.startCountDown(); }else{ wx.showToast({ title:res.errMsg||'未知错误发生!', icon:"error" }) } },fail(err){ console.error(err); } }); }, /** * 启动倒计时 */ startCountDown(){ var timer=null, count=parseInt(this.data.countdown), self=this; clearInterval(timer); // 清除可能存在的旧定时器 this.setData({canGetCode:false}); // 设置不可点击状态 timer=setInterval(function(){ if(count<=0){ clearInterval(timer); self.setData({ canGetCode:true, countdown:self.data.countdown }); }else{ self.setData({countdown:(--count)}); } },1000); }, loginSubmit(event){ // 表单提交后的处理逻辑... } }) ``` 这段JavaScript代码定义了一系列辅助性的成员变量及方法来支撑起完整的用户体验流线。特别是针对“获取验证码”这一关键步骤做了详尽的规定:先是对传入参数进行必要的有效性检验,接着通过异步HTTP POST方式访问远程Web API以期获得临时通行密钥,一旦接收到肯定答复便立刻激活本地定时装置按照既定规则逐秒递减剩余可用次数直至归零重置准备迎接新一轮挑战的到来。
评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江拥羡橙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值