uniapp微信小程序用户授权问题（纯前端！）

获取微信绑定的手机号【繁琐】

前言

微信获取用户手机号，和用户名以及头像，在微信api更新后，都需要用户主动触发授权事件！！！通俗来讲，必须以点击事件的形式触发授权弹框！！！获取微信头像和用户名是一个事件，获取手机号也是一个事件，若同时要获取微信用户的头像用户名手机号，那么最少需要两个按钮来让用户主动触发2次！！！

详情请看步骤代码：

第一步

去微信公众平台拿到你的小程序的 AppID 和 AppSecret

链接 https://mp.weixin.qq.com

第二步

调用 uni.login方法获取code

//获取code
uni.login({
	provider:'weixin',
	uccess: (res) => {
		console.log(res)//此时的res中已经有code
		//调用第三部步的方法获取openid和session_key
		this.getOpenIdByJs(res.code,data=>{
		this.userOther.openid=data.openid
		this.userOther.session_key=data.session_key
					})
				}
			})

第三步

向微信发起请求拿到openid 和session_key，详情请看代码注释
请求路径 https://api.weixin.qq.com/sns/jscode2session

getOpenIdByJs(code,callback){
	 let url = 'https://api.weixin.qq.com/sns/jscode2session'
		 uni.request({
			url:url,
			data:{
			appid:this.AppID,	  //你的appid    第一步拿到的
			secret:this.AppSecret,//你的AppSecret  第一步拿到的
			js_code:code, 		  //第二步拿到的
			grant_type:'authorization_code'//写死的
				},
			success: (res) => {
				console.log(res)//打印看下res
				allback(res.data)//为保持同步，将结果正在第二步回调
				}
			  })
		},

第四步

我们先看看微信的官方文档怎么说
文档链接 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

那么我们在页面上就要定义一个按钮来手动执行触发

这是固定写法------点击会出现提示授权手机号弹框

<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">点击获取手机号</button>

定义点击按钮方法，此方法中的参数e中有对应的加密信息，出于对用户的隐私考虑，我们需要对数据e.detail.encryptedData进行解密

onGetPhoneNumber(e){
    console.log(e.detail.errMsg) //提示信息
    console.log(e.detail.iv)	//解密向量
    console.log(e.detail.encryptedData) //加密的手机号
	},

第五步 解密

解密，那么就必须有对应的解密包，微信的加密方式是根据ASE进行解密的，我们先去为微信下载官方的解密包
下载链接：https://developers.weixin.qq.com/miniprogram/dev/framework/openability/signature.html#%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%AF%86%E7%AE%97%E6%B3%95

如图，点击后就可以下载了

下载完成之后解压，小程序js环境，所以选中node中的js文件，其中是一个是demo简单的解密示例，一个是解密文件，将解密文件拿到项目中去。

第六步 封装解密方法

solveCode(encryptedData,iv){
//加载你的解密文件，请注意路径
const WXBizDataCrypt = require('../../utils/WXBizDataCrypt.js')
//通过appId和session_key,创建解密对象
var pc = new WXBizDataCrypt('你的appId','你的session_key')
//解密并进行赋值
var data = pc.decryptData(encryptedData,iv) //点击按钮获取到的参数
console.log(data)  //打印  解密后的手机号
}

第七步 调用解密方法进行解密

如果没看懂，请详细看第四步和第六步

onGetPhoneNumber(e){
    console.log(e.detail.errMsg) //提示信息
    console.log(e.detail.iv)	//解密向量
    console.log(e.detail.encryptedData) //加密的手机号
    this.solveCode(e.detailencryptedData,e.detail.iv)//调用解密方法解密获取到的数据
	},

获取微信用户名，头像【简单】

需定义事件，让用户手动触发！！！！！

uni.getUserProfile({
		desc: '登陆卡卡号发客，户反馈是打',
		success: (res) => {
			console.log("======================" +JSON.stringify(res) )
					},
		fail: (err) => {
			console.log("======================1" + JSON.stringify(err))
					}
				})