微信小程序获取手机号详细过程（新版本2.21.2）（旧版本兼容） |
您所在的位置：网站首页 › 微信的openid怎么看 › 微信小程序获取手机号详细过程（新版本2.21.2）（旧版本兼容） |
微信小程序获取手机号详细过程（新版本2.21.2）（旧版本兼容）
|
这里写目录标题
新版本2.21.2以后获取微信小程序手机号老版本兼容获取手机号
新版本2.21.2以后获取微信小程序手机号
首先你要确保自己的基础库版本是2.21.2，我选择的是当前最新的
在button的文档描述
不需要做wx.login的处理，只需要将code传给后端即可 老版本兼容获取手机号WXML 获取手机号首先我们需要调用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里面 然后需要使用的页面就 let WXBizDataCrypt = require('路径自己改/utils/WXBizDataCrypt')完整使用代码 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) }, }) |
在代码开始前给大家讲讲注意事项（不需要直接往下看） 
然后接下来是项目代码 WXML
样式的话自己按需要设置
通过微信小程序官方api获得回调内容 
已经会出现这个页面了 注意如果是个人小程序是不会出现回调的，但是依旧会弹出这个允许拒绝页面下面是回调内容 长这个样子 
JS【本文地址】
今日新闻 |
推荐新闻 |