背景
在平时使用第三方微信小程序时,经常会有需要获取微信手机号码的情况,如下图所示:
那这种是怎样实现的呢?下面记录下获取微信手机号码的方法。
备注:需要有一个微信小程序号,并且这个号是经过企业认证的。(获取手机号码的功能不对个人小程序号生效)
那下面我们就一起开始,获取手机号码的编程之旅了。
1、打开微信开发者工具新建工程
在app.json文件中新增 "pages/getphonenumber/getphonenumber", 如下图所示:
2、准备密文解析工具类
通过微信小程序提供的接口获取手机号码,返回的数据是加密的,所以需要对返回的加密数据进行解密。
2.1 添加密文解析工具类需要用到的库
第一步、在微信开发者工具中,点击 "终端" ——> “新建终端” 如下图所示:
第二步、执行 npm init 指令
//执行npm init后需要你输入一些信息,直接一直点击 “回车”键就好
如下图所示:
第三步、依次执行 npm install crypto-js --save 、 npm install js-base64 --save
如下图所示:
第四步、在微信开发工具的菜单栏 选择 “工具” ——> “构建npm” 构建完成即可
2.2 解析类实现
在工程的utils文件夹下新建 WXBizDataCrypt.js文件,代码实现如下所示:
3、getphonenumber的实现
3.1 、getphonenumber.js的实现
注意: appId、secret需要替换为自身小程序的
3.2、getphonenumber.wxml 实现
好了,实现内容就这么多。
备注:一般情况下 获取jscode2session 是放到服务器端去实现的,这里我把获取sessionKey全都放在小程序端去实现了。
参考小程序官网链接:
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
4、运行效果图
默认运行