uniapp开发微信小程序获取用户手机号
uniapp开发微信小程序获取用户手机号-链接
功能描述：微信小程序，点击微信第三方登录，获取到当前用户绑定的手机号与openId（或unionid），请求后端接口实现登录。
功能拆分逻辑：
点击某个按钮，弹出请求微信授权界面。
点击允许按钮，获取用户微信绑定的手机号与openId
请求后端接口，实现登录。
主要重点还是在前两步。我们来看一下实际的实现
创建getPhoneNumber按钮
依据微信小程序开发文档描述，小程序官方文档，先写一个button按钮，open-type设为getPhoneNumber，在uniapp页面中创建按钮：
代码示例
<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">唤起授权</button>
:warning:注意：
小程序官方的写法如下，但我们在uniapp想要触发按钮点击，并进行后续操作的话，建议使用上面的写法。
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
调用wx.login 获取code
:warning: 根据官方文档描述，要想获取加密的手机号码，必须要先登录，所以我们在页面的onload 中调用微信登录接口,并获取code。
代码示例：
onload(){wx.login({success: (res) => {if (res.code) { //微信登录成功 已拿到code // ...doSomething } else {console.log('登录失败！' + res.errMsg)}}})}用code换取session和openId
在获取到登录成功后微信返回的code后，我们要用code换取session和openid/unionid
换取方式有两种：
第一种不借助后端（不推荐）
第二种借助后端
1.不借助后端获取
不借助后端获取，就是你必须知道你小程序的
APPID和secret，这个可以在 小程序控制台->开发->开发设置 中看到，然后用APPIDsecret以及上一步获取到的code请求微信的auth.code2Session接口，获取session和openidauth.code2Session文档
:warning:这样做的话你的小程序的 APPID 和 secret会明文出现在前端代码中，有泄漏风险
改造上面的onload事件
代码示例：
onload(){wx.login({success: (res) => {if (res.code) { //微信登录成功 已拿到code this.jsCode=res.code //保存获取到的code uni.request({url: 'https://api.weixin.qq.com/sns/jscode2session',method:'GET',data: {appid: 'wx********', //你的小程序的APPID secret: 'xxxxxxxxxx', //你的小程序的secret, code: res.code //wx.login 登录成功后的code },success: (cts) => {// 换取成功后 暂存这些数据 留作后续操作 this.openid=cts.data.openid //openid 用户唯一标识 this.unionid=cts.data.unionid //unionid 开放平台唯一标识 this.session_key=cts.data.session_key //session_key 会话密钥 }});} else {console.log('登录失败！' + res.errMsg)}}})}:warning:注意：
1.如果请求jscode2session接口失败，请在你的 小程序后台【request合法域名】中添加https://api.weixin.qq.com
unionid 并不是每个账号都会返回，必须要在满足 UnionID 下发条件的情况下会返回，详见UnionID 机制说明。
2.借助后端获取
借助后端获取实际上就是让后端给你一个接口，你请求后端的接口，后端再去请求微信的jscode2session,这样你前端只需要提交code 就可以。APPID和secret都是保存在后端，不容易泄漏。
例如，我的后端开发了个接口https://www.xx123.com//common/unionId.do,我只需要把上面代码中的请求的地址和参数换一下就可以了。
代码示例
onload(){wx.login({success: (res) => {if (res.code) { //微信登录成功 已拿到code uni.request({url: 'https://www.xx123.com//common/unionId.do', //演示地址，请以你的后端接口为准 method:'POST',data: {code: res.code //wx.login 登录成功后的code },success: (cts) => {// 换取成功后 暂存这些数据 留作后续操作 this.openid=cts.data.openid //openid 用户唯一标识 this.unionid=cts.data.unionid //unionid 开放平台唯一标识 this.session_key=cts.data.session_key //session_key 会话密钥 }});} else {console.log('登录失败！' + res.errMsg)}}})}
按钮点击触发事件 onGetPhoneNumber
做完以上几个步骤后，我们终于可以拿到加密的用户信息了，在页面的methods中创建点击触发事件，注意判断一下用户是否拒绝授权
代码示例：
methods:{onGetPhoneNumber(e){if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权 //拒绝授权后弹出一些提示 }else{ //允许授权 console.log(e.detail.encryptedData)e.detail.encryptedData //加密的用户信息 e.detail.iv //加密算法的初始向量 时要用到 }}}
控制台打印出来的加密信息：
解密用户信息
用户信息我们拿到了，加密的，接下来我们如何解密呢？
解密方式主要有3种，第三种因为条件有限，我暂时无法尝试。主要还是讲讲前两种
前端解密
后端解密
云开发解密（只适用于开通云开发的小程序）
1.前端解密
(1) 安装crypto-js
使用npm 安装crypto-js
安装命令：
npm install crypto-js
（2）下载WXBizDataCrypt.js文件
下载解压后你会发现原来是后端文件:grin::grin::grin:，没关系。
打开Node文件夹，把WXBizDataCrypt.js文件放入你的项目中。（比如我是放在我的common文件夹下）
在需要解密的页面引用该文件
import WXBizDataCrypt from "@/common/WXBizDataCrypt.js"; //请以你的实际地址为准
（3）调用解密
改造onGetPhoneNumber方法，注意此处还是要用到小程序的APPID
代码示例：
methods:{onGetPhoneNumber(e){if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权 //拒绝授权后弹出一些提示 }else{ //允许授权 let pc = new WXBizDataCrypt('wxXXXXXXX',this.session_key); //wxXXXXXXX为你的小程序APPID let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);console.log(data) //data就是最终解密的用户信息 //后续操作。。。 }}}
解密后的用户信息：
前端解密会在前端有泄漏小程序APPID的风险
（因为我们的后端是java，官方没有dome文件，所以只能前端解密了） :sob::sob:
2.后端解密
后端解密就是同样的让后端创建一个接口，前端请求这个接口，提交encryptedDataiv和session_key让后端给你返回解密后的信息。
代码示例：
methods:{onGetPhoneNumber(e){if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权 //拒绝授权后弹出一些提示 }else{ //允许授权 <div