要实现的是微信小程序的授权获取用户手机号功能，最终实现效果如下图：
总结：
前端：先在小程序中编写按钮给按钮加上
open-type="getPhoneNumber"属性，并绑定触摸事件，通过按钮发起用户授权弹框，在用户授权之后，会得到一个加密的动态令牌，将这个动态令牌传给后端。后端：向微信接口服务发送请求，获取接口调用凭据，拼接到请求的url上，带上前端传来的动态令牌，再次向微信接口服务发起请求，获取到解密后的手机号
1.用户在授权小程序后，拿到动态令牌，将令牌传到后端，由后端进行解密获取手机号
wxml文件
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
js文件
getPhoneNumber (e) {
// console.log(e.detail.code) // 动态令牌
// console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
// console.log(e.detail.errno) // 错误码（失败时返回）
let data = {
code:e.detail.code
}
request('post','/login/getuserphonenumber',data).then(res=>{
console.log(res);
})
}
2.调用getAccessToken接口获取access_token(获取接口调用凭据 | 微信开放文档 (qq.com))
这个接口需要获取AppID和AppSecret(小程序密钥)在微信开发平台即可获取
3.调用getPhoneNumber接口获取手机号（手机号验证 | 微信开放文档 (qq.com)）
koa后端代码
const Router = require("koa-router")
const router = new Router()
const axios = require('axios');
async function getAccessToken() {
const appId = 'xxxxx';//xxxxx填你具体的AppID和密钥
const appSecret = 'xxxxx';
try {
const response = await axios.get('https://api.weixin.qq.com/cgi-bin/token', {
params: {
grant_type: 'client_credential',
appid: appId,
secret: appSecret
}
});
const { access_token } = response.data;
// 在这里对 access_token 进行相应的处理和使用
return access_token;
} catch (error) {
// 处理错误情况
console.error('Failed to get access token:', error);
throw new Error('Failed to get access token');
}
}
async function getPhoneNumber(code){
//调用并获取access_token
const access_token = await getAccessToken()
//获取access_token的接口地址
let url = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" + access_token
const res = await axios.post(url,{code})
const phoneNumber = res.data.phone_info.purePhoneNumber
return phoneNumber
}
//将获取到的手机号通过接口返回给前端，接收一个code参数
router.post('/getuserphonenumber',async (ctx,next)=>{
const { code } = ctx.request.body
try {
const phoneNumber = await getPhoneNumber(code);
ctx.body = {
phoneNumber
};
} catch (error) {
ctx.status = 500;
ctx.body = {
error: 'Failed to get access token'
};
}
})
//导出路由，在路由的index文件中合并路由
module.exports = router
在开发者工具中的界面和真机调试页面略有不同，开发者工具中显示的效果和你的工具版本有关，我工具中显示的如下图：
真机调试如下图：
