uni-app开发微信小程序实现手机号码一键登录,小程序获取手机号码 电脑版发表于:2023/10/7 16:26 [TOC] ### 前提 tn2>要获取手机号的前提就是,首先你的appid是企业注册的,并且需要认证,而且要让管理微信公众平台appid的管理员把你的微信号添加到项目成员。 ### 第一步:先获取access_token 这个是微信公众号,微信小程序开发的基础,就一个get请求看官方文档就知道了很简单 #### 请求的接口 ``` https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的secret ``` tn4>拿到appid和secret直接在浏览器输入就可以看到结果了,appid和secret在微信小程序管理员账户登录后的开发管理-->开发设置可以看到。 **或者直接把请求的地址复制到postman中去请求也可以** ![](https://img.tnblog.net/arcimg/aojiancc2/a7e6726adc464c23b32727b532c79e13.png) 以前写的用.net代码获取access_token的 https://www.tnblog.net/aojiancc2/article/details/2470 ### 第二步:获取动态令牌 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html ##### 需要通过按钮来触发用户获取手机号码的授权 在uni-app上是这么写(编译成小程序的代码后应该就会变成官方文档上面的那种写法,貌似就是绑定的事件有一点小区别) ``` <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号码一键登录</button> ``` 使用一个事件来处理授权后的代码: ``` const onGetPhoneNumber = (e: any) => { if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权 //拒绝授权后弹出一些提示 } else { //允许授权 console.log(e); } } ``` 用户点击后弹出一个授权框 <img src="https://img.tnblog.net/arcimg/aojiancc2/be85a4b8c0ad4891b0321f8a5265a613.jpg" style="width:399px;height:auto;"> ##### 当用户点击允许按钮后就可以拿到动态令牌token了 ![](https://img.tnblog.net/arcimg/aojiancc2/f7a15deb36334ae69094e4e3b9a49ee9.png) 这里不需要去手动调用接口,直接使用按钮去触发即可,用户点击允许后就可以拿到code,然后通过第一步拿到的access_token就可以去调用接口拿到手机号了。 ### 第三步:通过拿到的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 ``` 使用post请求的方式,还需要在body中传递code,使用postman测试一下: ![](https://img.tnblog.net/arcimg/aojiancc2/bfd3376c60a54bcd8268074696da1f95.jpg) 没有问题,手机号能够正确的获取! ### 代码封装