微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）

分手后的思念是犯贱 2023-10-07 21:56 9阅读 0赞

#### 文章目录 ####

*  一、前言
 *  二、前端代码wxml
 *  三、前端代码js
 *  四、后端java
 *  五、程序流程
 *  六、参考

## 一、前言 ##

> [微信小程序开发笔记——导读][Link 1]

>  *  大部分微信小程序开发者都会有这样的需求：***获取小程序用户的手机号码***。
>  *  但是，因为小程序用户的手机号码属于重要信息，为了安全，所以需要如下一系列较为复杂的方法和步骤。
>  *  我前期主要通过小程序云的方法获取用户手机号码，后面**因为微信政策变更，小程序云不再提供免费版本，最低每月也要收费19元**。
>  *  所以，我才转用方法二和方法三。否则方法一小程序云的方法是最简单的。

> [微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）][_getPhoneNumber]  
> [微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）][_getPhoneNumber _ 2.21.2]  
> [微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）][_getPhoneNumber _ 2.21.2 1]

*  首先确保基础库版本在2.21.2之后

![在这里插入图片描述][0206c80ce9714f1fa90b09b81ef0bdd2.png]

## 二、前端代码wxml ##

*  必须要有这个button，并且用户点击了，才能有下一步

<button type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="weui-vcode-btn" wx:else>获取手机号</button>

![在这里插入图片描述][a78381bd311048ecb7a345ff373c33ee.png]

## 三、前端代码js ##

*  `bindgetphonenumber="getPhoneNumber"`按钮的回调函数

getPhoneNumber(e) {
        
        var_this = this
        console.log("getPhoneNumber", e)
        
        keyueliSdk.getPhoneNumber({
        
            code: e.detail.code,
            appId: app.globalData.appId,
        },
        (res) => {
        
            console.log("getPhoneNumber", "success", res)
            _this.setData({
        
                mobile: res.data.data.phoneNumber
            })
        },
        (res) => {
        
            console.log("getPhoneNumber", "fail", res)
        })
    },

*  `keyueliSdk.js`接口工具类

//获取用户手机号码
    const getPhoneNumber = (data, success, fail) => {
        
      console.log("getPhoneNumber", data)
      request(
        endpoint + "/v1/app/user/getPhoneNumber", {
        
          // 'content-type': 'application/x-www-form-urlencoded'
          'content-type': 'application/json'
        },
        data,
        "POST",
        success, fail
      )
    }
    
    module.exports = {
        
      getPhoneNumber: getPhoneNumber,
    }

## 四、后端java ##

*  `controller.java`

@ApiOperation("查询用户手机号码")
    @PostMapping("/getPhoneNumber")
    public AjaxResult getPhoneNumber(@ApiParam() @RequestBody AppCode appCode)
    {
        
        log.info(appCode.toString());
        return AjaxResult.success(loginService.getPhoneNumber(appCode));
    }

*  `loginService.java`

public JSONObject getPhoneNumber(AppCode appCode){
        
         if(!WXUtils.checkAppId(appCode.getAppId())){
        
             log.error("appId异常: "+ appCode.toString());
             throw new CustomException("AppId 异常");
         }
    
         return WXUtils.getPhoneNumber(appCode.getCode(), appCode.getAppId());
    }

*  `WXUtils.java`

public static JSONObject getPhoneNumber(String code, String appId){
        
        try {
        
            String objectStr = HttpUtil.post(String.format("https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=%s",getAccessToken(appId)), "{\"code\":\""+code+"\"}");
            log.info(objectStr);
            JSONObject jsonObject = JSON.parseObject(objectStr);
            return jsonObject.getJSONObject("phone_info");
        }catch (Exception e){
        
            e.printStackTrace();
            log.error("微信code解析异常", e.getMessage());
        }
        return null;
    }
    
    public static String getAccessToken(String appId){
        
        try {
        
            String objectStr = HttpUtil.get(String.format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s",appId, getAppSecret(appId)));
            log.info(objectStr);
            JSONObject jsonObject = JSON.parseObject(objectStr);
            return jsonObject.getString("access_token");
        }catch (Exception e){
        
            e.printStackTrace();
            log.error("微信code解析异常", e.getMessage());
        }
        return null;
    }

## 五、程序流程 ##

注册界面后端服务器按钮点击，getPhoneNumber获取codehttps post请求，code和appId 2个参数拿appId和appKey通过auth.getAccessToken获取token拿code和token通过phonenumber.getPhoneNumber获取phoneNumber返回phoneNumber注册界面后端服务器

![在这里插入图片描述][7900738e6059487c9872324875800464.png]

## 六、参考 ##

*  [phonenumber.getPhoneNumber][]
 *  [auth.getAccessToken][]
 *  [获取手机号 | 微信开放文档][Link 2]

***觉得好，就一键三连呗（点赞+收藏+关注）***

[Link 1]: https://blog.csdn.net/kangweijian/article/details/122036953
[_getPhoneNumber]: https://blog.csdn.net/kangweijian/article/details/128228701
[_getPhoneNumber _ 2.21.2]: https://blog.csdn.net/kangweijian/article/details/128225601
[_getPhoneNumber _ 2.21.2 1]: https://blog.csdn.net/kangweijian/article/details/128228832
[0206c80ce9714f1fa90b09b81ef0bdd2.png]: https://img-blog.csdnimg.cn/0206c80ce9714f1fa90b09b81ef0bdd2.png
[a78381bd311048ecb7a345ff373c33ee.png]: https://img-blog.csdnimg.cn/a78381bd311048ecb7a345ff373c33ee.png
[7900738e6059487c9872324875800464.png]: https://img-blog.csdnimg.cn/7900738e6059487c9872324875800464.png
[phonenumber.getPhoneNumber]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/phonenumber/phonenumber.getPhoneNumber.html
[auth.getAccessToken]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html