小程序web-view组件向微信小程序传递支付参数，并调起微信支付

前言

这种情况是不多见的，碰巧本人遇见了，所以记录一下

H5页面

一般是后端把我们需要传递的参数处理好，给到我们前端。调起微信小程序支付的参数有小程序IDappId、时间戳
timeStamp、随机字符串nonceStr、订单详情扩展字符串package、签名方式signType、签名paySign。

大家可以参考官方文档小程序调起支付API，不多说了直接代码。

functiontopay(){
	wx.miniProgram.postMessage({//这个方法在小程序文档中有，H5向小程序传值//官方地址https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html//这里一定要将数据放在data中
		data:{
			message:{
                  appId: appId,//appid
                  timeStamp: timeStamp,//时间戳
                  nonceStr: nonceStr,//随机字符串package: packages,//订单详情扩展字符串
                  signType: signType,//签名方式
                  paySign: paySign,//签名},},});//H5向小程序传值的方法会在特定的时间触发，因此需要我们手动写一个跳转（也可以写后退和摧毁，分享，以需求而定）
	wx.miniProgram.redirectTo({
		url:"../pay/pay",//跳到小程序支付页面});}

微信小程序页面

在web-view组件里定义接收事件

<web-view src="http://******.com" bindmessage="handlePostMessage"></web-view>//js部分handlePostMessage:function(e){let datas= e.detail.data[e.detail.data.length-1].message;//多次传递会是数组的形式，传递一次会push进数组。//所以我们需要拿到最新的数据，也就是数组的最后一个子集。//把数据存本地一下
	wx.setStorageSync('appId',datas.appId)//appid
	wx.setStorageSync('timeStamp',datas.timeStamp)//时间戳
	wx.setStorageSync('nonceStr',datas.nonceStr)//随机字符串
	wx.setStorageSync('package',datas.package)//订单详情扩展字符串
	wx.setStorageSync('signType',datas.singType)//签名方式
	wx.setStorageSync('paySign',datas.paySign)//签名},

支付页面:h5中跳转的就是这个页面

let appId= wx.getStorageSync('appId');//appidlet timeStamp= wx.getStorageSync('timeStamp');//时间戳let nonceStr= wx.getStorageSync('nonceStr');//随机字符串let packages= wx.getStorageSync('package');//订单详情扩展字符串let singType= wx.getStorageSync('singType');//微信签名方式let paySign= wx.getStorageSync('paySign');//签名let data={'appId':appId,//appid"timeStamp": timeStamp,//时间戳"nonceStr": nonceStr,//随机字符串"package": packages,//订单详情扩展字符串"signType": singType,//微信签名方式:"paySign": paySign,//签名}//小程序调起支付api
        wx.requestPayment({...data,"success":function(res){console.log('成功', res)},"fail":function(res){console.log('取消',res)},"complete":function(res){console.log('失败',res)}})