微信小程序获取用户手机号码教程（前端＋后端）

1.背景介绍

在开发一款微信小程序时，需要用户进行微信登录，获取用户的手机号码来作为用户的唯一标识（userId），于是探索获取用户手机号码的方式；

（当然，通过wx.login来获取code，进而换取用户的openid也是可以的）

目前版本的微信小程序获取用户手机号码的方式如下：

前端开发参考：手机号快速填写组件 | 微信开放文档

后端开发参考：

手机号快速填写 | 微信开放文档

步骤如下：

①利用手机号快速填写的功能，将button组件 open-type 的值设置为 getPhoneNumber

②用户点击按钮，弹出申请获取用户手机号的弹窗：

③如果用户点击允许，则可以通过bindgetphonenumber事件回调获取到动态令牌code（注意这里的code和wx.login的code不一样，而且获取用户手机号码不需要提前调用wx.login获取code了）

④把code传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号

注意一点，获取手机号的功能好像只允许经过认证的小程序使用，如果未认证只能使用测试号才可以

否则便会报错：

2.前端代码

开发环境：Uniapp框架

微信小程序调试基础库的版本：2.32.1

基本思路：通过按钮绑定监听事件，获取用户授权，得到code，传到后端换取用户手机号：

代码如下：

按钮：

<button open-type="getPhoneNumber" class="login_button" @getphonenumber="login" v-show="!logged">登录button>

login函数：

1. //登录按钮
2. login(e) {
3. console.log(e)
4. var detail = e.detail
5. if (detail.errMsg == "getPhoneNumber:ok") {
6. console.log("用户同意授权")
7. var code = detail.code
8. uni.request({
9. url: "http://localhost:8081/getPhoneNumber", //调用接口
10. method: 'POST',
11. header: {
12. 'content-type': 'application/json'
13. },
14. data: {
15. code: code, //请求体中封装code
16. },
17. success(e) {
18. console.log(e)
19. var userId = e.data.phone_info.purePhoneNumber;
20. uni.setStorage({
21. key: "userId",
22. data: userId,
23. success() {
24. uni.switchTab({
25. url: "../../pages/homePage/homepage"
26. })
27. }
28. })
29. },
30. fail(e) {
31. uni.showModal({
32. title: "错误!",
33. content: "网络错误!",
34. complete() {
35. }
36. })
37. }
38. })
39. }
40. }

3.后端代码

开发环境：springboot

开发工具：idea

如果对于idea创建springboot项目有任何问题，可以参考的这一篇文章的后端代码部分：

百度翻译API使用教程（前端+后端）_THE WHY的博客-CSDN博客

代码展示如下：

1. @RestController
2. public class PhoneNumberController {
4. @PostMapping("/getPhoneNumber")
5. public Object getPhoneNumber(@RequestBody Map data)
6. {
7. //通过appid和secret来获取token
8. //WXContent.APPID是自定义的全局变量
9. String tokenUrl = String.format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s", WXContent.APPID, WXContent.APPSECRET);
10. JSONObject token = JSON.parseObject(HttpUtil.get(tokenUrl));
12. //通过token和code来获取用户手机号
13. String url = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" + token.getString("access_token");
15. //封装请求体
16. Map paramMap = new HashMap<>();
17. paramMap.put("code", data.get("code").toString());
19. //封装请求头
20. HttpHeaders headers = new HttpHeaders();
21. headers.setContentType(MediaType.APPLICATION_JSON);
23. HttpEntity> httpEntity = new HttpEntity<>(paramMap,headers);
25. //通过RestTemplate发送请求，获取到用户手机号码
26. RestTemplate restTemplate = new RestTemplate();
27. ResponseEntity