微信小程序02: 使用微信快速验证组件code获取手机号_微信小程序获取手机号

---

1.前言简介

上文为核心文章, 请先复制上文的代码后再复制此篇代码
里面是对微信小程序大部分操作的总结与封装

1.1 专栏传送门

本篇专栏地址:
=> 传送门: 微信小程序相关操作专栏 <=

专栏中的一个文章说明(可跳过此说明)

• 有一个旧的文章, 里面有个获取手机号的demo,
• 基本直接复制那篇也可以使用(不推荐)
• => 传送门:(旧版本)获取手机号(不推荐)

1.1.1 上文小总结

上文为核心文章, 请先复制上文的代码后再复制此篇代码
里面是对微信小程序大部分操作的总结与封装

1.1.2 上文传送门

[===> 微信小程序00: 获取accessToken,手机号, 小程序二维码,openId与unionId 公共配置类(核心篇) ]

2. 微信小程序获取手机号

微信小程序官方文档: => 传送门 <=

2.1 业务场景(使用与充值)

微信小程序手机号快捷验证, 当然了 2023年8月26日起开始收费了(功能就是下图展示的)
当然 用其他普通短信认证 都行 反正价格都差不多, 不免费了!!!

=> 传送门: 微信小程序手机号快速验证-微信开放社区

2.2 准备工作

第一步: 请先复制核心篇微信小程序-00的统一封装类

=> 传送门: 微信小程序00: 微信小程序公共配置类(核心篇)

第二步: 请先复制上一篇 获取accessToken

=> 传送门: 微信小程序01: springboot获取accessToken方式

使用流程介绍

第一步: 是将微信小程序相关操作同一封装
第二步: 使用第一步封装代码并且获取accessToken
目的: 将获取到的accessToken用于本篇文章进行手机号快捷验证

2.3 具体代码使用与注释如下

在2.2步骤说过 这里还是在强调一下

特别注意: 请先复制核心篇: ===> 微信小程序-00`的统一封装类
注意: 请先阅读上一篇: ===> 微信小程序01: springboot获取accessToken方式

2.3.1 代码解释(一)[无需复制]

找到WechatServiceUtils类 的 getPhoneByCode()方法
这个是通过微信code获取手机号信息

	/**
     * 获取手机号信息
     * @param code js_code
     * @return phone
     */
    public String getPhoneByCode(String code) {
        String phoneUrl = wechatConfigProperties.getPhoneUrl(getRedisCacheAccessToken());

        Map<String, Object> map = new HashMap<>();
        map.put("code", code);

        JSONObject jsonObject = sendPostRestTemplate(phoneUrl, map, JSONObject.class);
        System.out.println(jsonObject);

        if (jsonObject.containsKey("errcode")) {

            /*如果异常码是0 说明正常*/
            if (!Objects.equals(String.valueOf(jsonObject.get("errcode")), "0")) {
                log.error("===> 获取手机号的异常信息 : {}", jsonObject + "");

                throw new ServiceException("获取失败: " + jsonObject.get("errmsg"), (Integer) jsonObject.get("errcode"));
            }
        }

        JSONObject phoneInfo = jsonObject.getJSONObject("phone_info");

        return phoneInfo.getString("phoneNumber");
    }
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
26
27
28

2.3.2 代码解释(二)[无需复制]

自己封装一个发送post请求的模板(使用restTemplate, 使用其他方法随意)

    /**
     * 远程调用 restTemplate方法 post请求
     *
     * @param url
     * @param body
     * @return
     */
    public <T> T sendPostRestTemplate(String url, Map<String, Object> body, Class<T> responseType) {
        return restTemplate.exchange(url, HttpMethod.POST, new HttpEntity<>(body, null), responseType).getBody();
    }
1
2
3
4
5
6
7
8
9
10

2.4 最后一步 获取手机号信息

2.4.1 两行代码搞定(使用代码)

注意: 可以建立实体类请求对象 配合@Validated对参数进行校验

  String code = (String) jsonObject.get("code");

  String phone = wechatServiceUtils.getPhoneByCode(code);
1
2
3

2.4.2 异常码信息(常用)

2.5 前端小程序调用方法(补充)

ps 这个code不是wx.login的code 千万别弄混了
具体使用方式如下(页面+js)

2.5.1 按钮页面代码

<button wx:if="{{login}}" open-type="getPhoneNumber" class="loginbutton" bind:getphonenumber="getPhoneNumber">获取手机号</button>
1

2.5.2 获取手机号js代码

业务自己填充

getPhoneNumber(e) {
		let _this = this;
		let param = {
			code: e.detail.code
		}
		getPhone(param).then(res => {
			_this.setData({
				userPhone: res.data.phone_info.phoneNumber,
			})
		})
	}
1
2
3
4
5
6
7
8
9
10
11

3. 文章的总结与预告

3.1 本文总结

1. 使用微信手机号快捷验证组件获取手机号
2. 找到充值位置与方式(核心呀...)
3. 上面代码一复制就OK了, 注册的时候使用一次即可
4. 其余可用openId/unionId进行判断

3.2 下文预告

1. 获取openId与unionId

2. 传送门: => 获取不限制小程序二维码 <=

3. 微信支付

4. 微信提现

---

作者pingzhuyan 感谢观看