项目已在公众号上线，现在要搞个小程序，小程序有web-view，可以免去二次开发，直接连接到公众号即可，但在web-view中无法调用H5的微信支付，需要在H5中调回小程序中才能调用微信支付。
闲话不多说，直接贴代码：
首先在小程序中连接公众号连接
在原来的H5支付页面中加个判断
var isWxMini = window.__wxjs_environment === 'miniprogram' // 判断场景是否小程序
if (isWxMini) {
// 把要用到的参数传到小程序中进行支付 wxJson是由后台协商好返回的数据格式，该代码仅供参考，不能实际使用
const wxJson = {
appId: "wxd678efh567hg6787",
nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
package: "prepay_id=wx2017033010242291fcfe0db70013231072",
signType: "MD5",
timeStamp: "1490840662",
paySign:"BB2B9BD3F2F8A1CB270C6ACE3D7BDB9"
};
wx.miniProgram.navigateTo({
url: "/pages/pay/pay?param=" + wxJson // 微信小程序调用支付的页面
})
} else {
// 这里放原理的支付逻辑
}
接下来在小程序中添加一个页面pay，空白页即可
pay.js中的代码如下:
onLoad: function (options) {
var param = options.param;
this.requestPayment(param)
},
requestPayment: function (obj) {
wx.requestPayment({
'timeStamp': obj.timeStamp,
'nonceStr': obj.nonceStr,
'package': obj.package,
'signType': 'MD5',
'paySign': obj.paySign,
'success': function (res) {
// 定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 （index page）
var prevPage = pages[pages.length - 2];
//通过page.setData方法使index的webview 重新加载url 有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
prevPage.setData({
url: "https://xxx.com/success"
}),
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
},
'fail': function (res) {
console.log("支付失败");
console.log(res);
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据");
prevPage.setData({
url: "https://xxx.com/fail"
}),
console.log("准备结束页面")
wx.navigateBack();
}
})
}
到这里就能在小程序中调其web-view中用到的微信支付了，亲测有效，希望对你有所帮助。
有问题可联系
QQ： 412606846 (微信同号)