[移动开发]小程序web-view组件向微信小程序传递支付参数，并调起微信支付

前言

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

H5页面

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

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

function topay(){
	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');//appid
        let 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)}
            }
        )