新版本2.21.2以后获取微信小程序手机号
首先你要确保自己的基础库版本是2.21.2，我选择的是当前最新的
在button的文档描述
在代码开始前给大家讲讲注意事项（不需要直接往下看）
然后接下来是项目代码
WXML
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
样式的话自己按需要设置
通过微信小程序官方api获得回调内容
已经会出现这个页面了
注意如果是个人小程序是不会出现回调的，但是依旧会弹出这个允许拒绝页面下面是回调内容
长这个样子
JS
//点击获取手机号码按钮
getPhoneNumber(e) {
wx.request({
url: 'url',
data:{
code:e.detail.code,
},
success: (res)=>{
this.setData({
mobilePhone: res.data.purePhoneNumber,
})
}
})
},
不需要做wx.login的处理，只需要将code传给后端即可
老版本兼容获取手机号
WXML
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
首先我们需要调用wx.login获取到code码
用于调用后端接口获取session_key
JS
//获取js_code
wx.login({
success (res) {
console.log(res.code);
}
})
wx.login一般用于onshow或者onload的生命周期里面，因为如果放在调用函数里面，获取手机号的过程会有稍稍顿挫的缓慢感，所以需要提前调用wx.login，你也可以放在app.js里面的onlanuch
sessionkey的有效期是三天，我们需要后端接口去获取，提交code给后端，返回sessionkey
onLoad(options) {
wx.login({
success: (res) => {
wx.request({
url: '后端提供api url',
data: { code: res.code },
success: function (res) {
console.log(res)
that.setData({
sessionkey: res.data.session_key,
openid: res.data.openid
})
}
})
}
})
},
然后通过button回调获取encryptedData ,iv
非完整代码
getPhoneNumber(e) {
let appId = 开发者appid
let sessionKey = 获取的sessionkey
let encryptedData = encryptedData
let iv = iv
},
有了以上信息我们就可以解密了，如果后端做一个接口，我们在下方调用传递接口数据即可
getPhoneNumber(e) {
let appId = 开发者appid
let sessionKey = 获取的sessionkey
let encryptedData = e.detail.encryptedData
let iv = e.detail.iv
wx.request({
url: 'url',
data: {
appId : 'appid',
sessionKey,
encryptedData,
iv,
},
success: function (res) {
console.log(res)
}
})
},
如果后端没有写接口，我们也可以解密，不涉及到安全问题，因为你获取的操作都是在用户端实现的
手机号码解密使用的是 CryptoJS 包，点击下载CryptoJS 包
WXBizDataCrypt.js文件
/**
* Created by rd on 2017/5/4.
*/
// 引入CryptoJS 路径依个人导入情况变动
var Crypto = require('./cryptojs-master/cryptojs.js').Crypto;
var app = getApp();
function RdWXBizDataCrypt(appId, sessionKey) {
this.appId = appId
this.sessionKey = sessionKey
}
RdWXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
// base64 decode ：使用 CryptoJS 中 Crypto.util.base64ToBytes()进行 base64解码
var encryptedData = Crypto.util.base64ToBytes(encryptedData)
var key = Crypto.util.base64ToBytes(this.sessionKey);
var iv = Crypto.util.base64ToBytes(iv);
// 对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充
var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);
try {
// 解密
var bytes = Crypto.AES.decrypt(encryptedData, key, {
asBpytes:true,
iv: iv,
mode: mode
});
var decryptResult = JSON.parse(bytes);
} catch (err) {
console.log(err)
}
return decryptResult
}
module.exports = RdWXBizDataCrypt
将文件规范放在utils里面
然后需要使用的页面就文章来源：https://www.toymoban.com/news/detail-431766.html
let WXBizDataCrypt = require('路径自己改/utils/WXBizDataCrypt')
完整使用代码文章来源地址https://www.toymoban.com/news/detail-431766.html
let WXBizDataCrypt = require('路径自己改/utils/WXBizDataCrypt')
Page({
onLoad(options) {
wx.login({
success: (res) => {
wx.request({
url: 'url',
data: { code: res.code },
method: 'POST',
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res)
that.setData({
sessionkey: res.data.session_key,
openid: res.data.openid
})
}
})
}
})
},
getPhoneNumber(e) {
let appId = 开发者appid
let sessionKey = 获取的sessionkey
let encryptedData = e.detail.encryptedData
let iv = e.detail.iv
let pc = new WXBizDataCrypt(appId,sessionKey)
let res = pc.decryptData(encryptedData ,iv)
console.log(res)
},
})
到了这里，关于微信小程序获取手机号详细过程（新版本2.21.2）（旧版本兼容）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
