当前位置:   article > 正文

微信小程序获取用户手机号码教程(前端+后端)_小程序获取手机号文档

小程序获取手机号文档

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

3.后端代码

开发环境:springboot

开发工具:idea

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

百度翻译API使用教程(前端+后端)-CSDN博客

代码展示如下:

  1. @RestController
  2.     public class PhoneNumberController {
  3.  
  4.         @PostMapping("/getPhoneNumber")
  5.         public Object getPhoneNumber(@RequestBody Map<String,Object> 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));
  11.  
  12.             //通过token和code来获取用户手机号
  13.             String url = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" + token.getString("access_token");
  14.  
  15.             //封装请求体
  16.             Map<String, String> paramMap = new HashMap<>();
  17.             paramMap.put("code", data.get("code").toString());
  18.  
  19.             //封装请求头
  20.             HttpHeaders headers = new HttpHeaders();
  21.             headers.setContentType(MediaType.APPLICATION_JSON);
  22.  
  23.             HttpEntity<Map<String, String>> httpEntity = new HttpEntity<>(paramMap,headers);
  24.  
  25.             //通过RestTemplate发送请求,获取到用户手机号码
  26.             RestTemplate restTemplate = new RestTemplate();
  27.             ResponseEntity<Object> response = restTemplate.postForEntity(url, httpEntity, Object.class);
  28.  
  29.             //返回到前端展示
  30.             return response.getBody();
  31.         }
  32.     }

4.结果展示

在我的前端代码中有缓存用户id的功能,如果成功登录,即可在缓存中查看到用户id,如下:

5.补充:获取用户头像

微信小程序获取用户信息的功能好像挺离谱的,一直改来改去,目前大多是通过点击头像申请获取微信头像来实现

<button class="mine_avatar_wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
  <image class="mine_image" :src="avatarUrl"></image>
</button>


通过open-type绑定选择用户头像的功能,然后点击按钮即可弹出弹窗:

而onChooseAvatar函数则是获取到微信头像后渲染到页面上

onChooseAvatar(e)
    {
            this.avatarUrl = e.detail.avatarUrl
            uni.setStorageSync('avatarUrl',this.avatarUrl)
    },

如果有什么问题,欢迎留言讨论,如果有错误的话欢迎指正,谢谢大家~

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/429712
推荐阅读
相关标签
  

闽ICP备14008679号