微信小程序登录授权功能（webview）

一、微信登录授权功能：

1、微信小程序登录需要获取code、encryptedData、iv以及登录后后台传出来的Token,将4个参数传给后台，请求成功后跳转

说明怎么获取code、encryptedData、iv这三个参数？

（1）.获取code值：
使用wx.login()方法：该方法只有在webview框架中才能使用，
wx.login({ //调用login获取code
success(res) {
var code = res.code;
},
})
（2）.获取encryptedData、iv值：
使用wx.getUserInfo()方法：该方法只有在webview框架中使用
wx.getUserInfo({
var iv = encodeURIComponent(obj.iv);
var encryptedData = encodeURIComponent(obj.encryptedData);
})

2、这三个参数取到后传给H5页面，采用地址栏拼接传递

that.relituUrl = that.relituUrl + “&code=” + code +“&iv=” + iv + “&encryptedData=” + encryptedData;

H5接受webview传过来的值（index.html页面），并把接受到的值储存在浏览器内存中：

//获取地址栏中的地址
function getWindowUrl() {
var url = window.location.href;
var dataList = getUrlParams(url);
dataList = JSON.stringify(dataList); //转化为JSON字符串
localStorage.setItem(“UserData”, dataList);

}
//将地址栏中的参数截取出来
function getUrlParams(url) {
// 通过 ? 分割获取后面的参数字符串
let urlStr = url.split(‘?’)[1]
// 创建空对象存储参数
let obj = {};
// 再通过 & 将每一个参数单独分割出来
let paramsArr = urlStr.split(‘&’)
for (let i = 0, len = paramsArr.length; i < len; i++) {
// 再通过 = 将每一个参数分割为 key:value 的形式
let arr = paramsArr[i].split(‘=’)
obj[arr[0]] = arr[1];
}
return obj
}
最后在登录页面调取后台接口将浏览器内存中：code、encryptedData、iv以及Token值取出来传给后台

二、H5+webview小程序使用支付功能：

（说明：WeixinJSBridge.invoke(）方法在H5中不生效，调取微信支付功能的方法应该卸载webview程序中)

1.H5代码中将微信支付需要的5个参数获取出来（微信用户签名之类的参数），然后跳转到webview代码新建的页面同时需要将这5个参数传递过来，也是使用地址栏拼接的方法，注意在传递这几个值的时候需要在H5代码里加密在webview代码中解密(我把订单详情参数也传过来了，使用encodeURIComponent（加密）)

H5->webview:wx.miniProgram.navigateTo({
url: ‘/pages/index/payment?data=’ + encodeURIComponent(Response.data.Data) + '&detail='encodeURIComponent(this.SelectData)})
2.webview代码中新建一个支付详情页面这里是payment.vue页面，

（1）.页面使用onLoad（）方法获取地址栏传过来的参数(使用decodeURIComponent（）方法解码)
onLoad: function(options) {
this.payJson = JSON.parse(decodeURIComponent(options.data));
this.NewDetail=JSON.parse(decodeURIComponent(options.detail));
},
（2）.当点击支付按钮时触发支付方法调用wx.requestPayment（）微信自己的方法，将H5传过来的数据传到方法里：
WeixinPay: function() {
wx.requestPayment({
timeStamp: this.payJson.timeStamp,
nonceStr: this.payJson.nonceStr,
package: this.payJson.package,
signType: this.payJson.signType,
paySign: this.payJson.paySign,
success(res) {
console.log(“支付成功”, res)
uni.navigateBack();//支付成功返回订单列表页面
},
fail(res) {
console.log(“支付失败”, res)
}
})

		},
		记录一下