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

这篇具有很好参考价值的文章主要介绍了微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之后)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前言

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

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

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

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

getphonenumber,微信小程序开发笔记,微信小程序,前端,getPhoneNumber,获取手机号,小程序

二、前端代码wxml

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

getphonenumber,微信小程序开发笔记,微信小程序,前端,getPhoneNumber,获取手机号,小程序

三、前端代码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,微信小程序开发笔记,微信小程序,前端,getPhoneNumber,获取手机号,小程序

六、参考

  • phonenumber.getPhoneNumber
  • auth.getAccessToken
  • 获取手机号 | 微信开放文档

觉得好,就一键三连呗(点赞+收藏+关注)文章来源地址https://www.toymoban.com/news/detail-778922.html

到了这里,关于微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之后)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序开发踩坑日记:获取用户头像并持久化存储到后端服务器

    原来获取用户头像和昵称调用的是uni.getUserInfo(OBJECT)接口,但是2021年4月28日24时后发布的小程序新版本,无法通过uni.getUserInfo与button open-type=\\\"getUserInfo\\\"/获取用户个人信息(头像、昵称、性别与地区) 详细情况见官方文档:小程序登录、用户信息相关接口调整说明 | 微信开放社

    2024年04月14日
    浏览(30)
  • 微信小程序 - 2023 年最新授权获取用户手机号详细教程,完美解决 getPhoneNumber 获取不到 code 的问题(老项目使用手机号快速验证组件,打印授权后没有code字段,拿不到cod)

    由于官方修改了 “获取用户手机号” 规则,导致网上几乎所有教程全部失效,本文来做最新详细教程。 2023年8月往后(官方废弃了原来 “免费” 获取用户手机号的相关方法 API,导致了大量小程序原获取手机号的方式失效报错),本文是最新微信小程序 “收费” 获取用户手

    2024年02月17日
    浏览(58)
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)

    🥳🥳Welcome Huihui\\\'s Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welcome Huihui\\\'s Code World ! !🥳🥳 授权流程讲解 一.用户信息授权登录 1.wx.login 2.wx.getUserProfile 3.代码 WXML JS 二.用户信息授权登录之后台交互 前期准备 ①准备数据接口 ②密钥以及

    2024年02月08日
    浏览(35)
  • 微信小程序开发-云数据库添加及获取显示

    全国的疫情一个是东北一个是上海两个重灾区。被关在家里10天了,看了一下B站,看到了一个微信小程序开发的视频教程感觉不错,闲来无事就自己实践一下。 微信小程序出来已经好几年了,原来玩过一段时间,最后由于微信小程序开发的不断迭代,以后域名必须使用https,

    2024年02月09日
    浏览(38)
  • 微信小程序开发笔记

    详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 按钮css样式参考: https://www.runoob.com/css3/css3-buttons.html 详情参考: https://w

    2024年02月09日
    浏览(49)
  • 微信小程序获取手机号getPhoneNumber接口报错41001

    在使用 postman / apifox 调试微信小程序获取手机号接口时,微信报错 41001 : 该接口的请求报文其实是 表单参数 和 JSON参数 的集合体; 整个接口的请求需要 code 和 access_token 两个请求参数,接口的URL里边包含了 access_token : 但是没有包含 code ,也就意味着 access_token 是需要作为

    2024年02月11日
    浏览(31)
  • 微信小程序开发学习笔记

    Color: red Color: rgb(255, 99, 71) Color: rgba(red, green, blue, alpha) Color: #ff6347 background-color:指定元素的背景色 opacity:指定元素的透明度,取值在0~1之间 background-image:指定元素的背景图像,在水平和垂直方向上都会重复图像 background-repeat:配合background-image使用,指定图像重复方向或者

    2024年02月09日
    浏览(39)
  • 微信小程序开发 获取手机 体验版获取不到code,需打开调试器才行?

    最近开发遇到问题: 小程序开发,获取手机号时候,调用接口需要 code,但是体验版始终获取不到,只有在打开小程序调试器的时候才能获取到code.这么奇葩的问题原因竟然是小程序后台没有配置服务器域名,把相关域名在小程序后台配置下 就可以正常了。 点击允许后会调接

    2024年02月08日
    浏览(38)
  • 微信小程序获取手机号码 phonenumber.getPhoneNumber 提示47001错误

    微信小程序获取手机号码 phonenumber.getPhoneNumber 提示47001错误 经过测试, 文档说的是body 类型 实际却是json类型 正确代码如下:

    2024年02月06日
    浏览(41)
  • 微信小程序定位开发 逆地理位置查询 经纬度获取位置名称

    一. 微信小程序获取用户定位==经纬度(官方) (1)官方方法:wx.getLocation(Object object) (2)官方链接:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html (3)关键点: 申请权限 :在小程序管理后台,「开发」-「开发管理」-「接口设置」中申请开通该接口权限。

    2024年02月16日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包