当前位置:   article > 正文

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

getphonenumber

一、前言

微信小程序开发笔记——导读

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

微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码(小程序云)
微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前)
微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之后)

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

在这里插入图片描述

二、前端代码wxml

  • 必须要有这个button,并且用户点击了,才能有下一步
<button type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="weui-vcode-btn" wx:else>获取手机号</button>
  • 1

在这里插入图片描述

三、前端代码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)
    })
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 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,
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

四、后端java

  • controller.java
@ApiOperation("查询用户手机号码")
@PostMapping("/getPhoneNumber")
public AjaxResult getPhoneNumber(@ApiParam() @RequestBody AppCode appCode)
{
    log.info(appCode.toString());
    return AjaxResult.success(loginService.getPhoneNumber(appCode));
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 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());
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

五、程序流程

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

在这里插入图片描述

六、参考

觉得好,就一键三连呗(点赞+收藏+关注)

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

闽ICP备14008679号