小程序手机号快速验证组件(获取用户微信绑定手机号)

崧峻
原创
发布时间: 2025-11-01 16:01:28 | 阅读数 0收藏数 0评论数 0
小程序
微信
小程序
快速验证组件
封面
这篇文章将介绍如何在微信小程序中实现手机号快速验证功能，重点讲解如何通过微信提供的接口获取用户的绑定手机号。文章内容将涵盖微信小程序中的 getPhoneNumber 接口的使用方法、权限申请流程、以及如何处理用户的手机号数据。我们还将分享如何结合小程序的身份验证机制，快速而安全地验证用户身份，为用户提供更为便捷的注册和登录体验。

准备工作:

工具:

工具名称
数量
备注
微信开发者工具
1
软件
1

创建小程序

向左
向右
图片
123
  1. 如图1所示点击创建 设置项目名称和目录 appid就填写你们自己的就行
  2. 然后点击确认就进入到了图2所示的页面
  3. 如图3所示的绿框就是展示的页面主页的标签
2

文档介绍

图片

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

上面的链接是小程序的官方文档地址 大家可以看一下


下面是我们需要获取手机号的具体步骤

  1. 步骤1：需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，通过 bindgetphonenumber 事件获取回调信息；
  2. 步骤2：将 bindgetphonenumber 事件回调中的动态令牌code传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号。每个code有效期为5分钟，且只能消费一次。

注：getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。


3

创建标签

图片

index.wxml 页面代码如下


<!--index.wxml-->
<navigation-bar title="手机号认证测试" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view class="container">
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
获取手机号</button>
</view>
</scroll-view>


index.js 页面代码如下

// index.js
Page({
getPhoneNumber(e){
console.log(e.detail.code) // 动态令牌
console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
console.log(e.detail.errno) // 错误码（失败时返回）
}
})


4

-10000 状态码报错问题解决

向左
向右
图片
12

一般是你的小程序没有认证 或者appid输入错误

  1. 没有认证大家就先去微信开发者工具里面认证 要是不知道自己appid在哪就看图2所示
  2. 如果显示appid设置失败那么有可能是没登录 登录即可
5

获取code

向左
向右
图片
12
  1. 都认证好之后，点击按钮效果如图1 图2所示 图2就是我们的令牌和返回的一些信息，大家可以通过错误信息来判断是否获取成功这个时候我们就拿到了我们的code
6

获取Access_token

图片
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html 相关内容查看这个文档


官方文档说了我们通过 https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN 这个api接口来获取手机号信息


那么我的access_token 改如何获取呢 下面是文档地址

https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html


请求数据示例

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET


APPSECRET 还在刚刚AppID哪里获取 但是这步是需要后端进行请求的因为微信会校验域名

7

获取手机号

图片


// 完整的js代码如下 token部分大家后端去获取


// index.js
Page({
getPhoneNumber(e){
// 判断是否报错 如果不报错 发起请求
if(e.detail.errno==undefined){
// 获取code
const code = e.detail.code
wx.request({
url: 'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token='+"",
method: 'post',
data:{code:code},
success: (res) => {
if (res.data.code==200) {
console.log("获取成功",res.data.phone_info);
}else{
console.log("获取失败");
}
}
})
}
}
})

阅读记录0
点赞0
收藏0
禁止 本文未经作者允许授权，禁止转载
更多相关项目
猜你喜欢
评论/提问(已发布 0 条)
评论 评论
收藏 收藏
分享 分享
pdf下载 下载
pdf下载 举报