前言
这种情况是不多见的,碰巧本人遇见了,所以记录一下
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)}
}
)