官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6,即可看到h5调起支付需要的参数。
获取后台调用微信生成的支付签名,
$scope.onBridgeReady = function () {
$http.post("/wechat/createSign", $scope.payOrder).then(function (data) {
var order = data.data.data;
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": order.appid, //公众号名称,由商户传入
"timeStamp": order.timeStamp, //时间戳,自1970年以来的秒数
"nonceStr": order.nonce_str, //随机串
"package": "prepay_id=" + order.prepay_id,
"signType": "MD5", //微信签名方式
"paySign": order.sign //微信签名
}, function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
//alert("微信支付成功!");
$http.post("/wechat/toPaySuccessUrl").then(function (data) {
window.location.href = data.data.data + "?orderNo=" + order.out_trade_no;
})
// window.location.href = "http://qiansheng.imwork.net/paydone.html?orderNo=" + order.out_trade_no;
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
//alert("用户取消支付!");
} else {
alert("支付失败!");
}
});
})
}
签名算法:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
参考:微信公众号支付(二)H5调起支付 https://blog.csdn.net/zsm15623544116/article/details/79392263
通用demo: https://gitee.com/1600875665/weixinPay
然后需要实现iframe内调起支付
在iframe内发起
top.postMessage(data,'*');
外部做业务处理,可以做支付调起等
window.addEventListener("message", function (e) {
wxPay(JSON.parse(e.data))
})
微信支付方法封装
function wxPay(wxParams) {
// 微信支付API
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', wxParams,
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
console.log(res)
alert("成功")
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
console.log(res)
alert("失败")
// window.history.go(-1)
}
});
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
}
注:想在iframe调起window.WeixinJSBridge是不行的,会返回undefined
1.设置监听
window.addEventListener('message', function (msg) {
console.log(msg.data);
})
2.发送 message
window.postMessage(”message“, '*');
实现多页面通讯;
使用postMessage 需要精确的目标origin,不要用 *。
iframe: https://www.w3school.com.cn/tags/tag_iframe.asp
跨域iframe实例: https://www.jb51.net/article/123740.htm https://www.cnblogs.com/qidian10/p/3316714.html
调用parent页面的方法: https://blog.csdn.net/shuaidao_wupengyou/article/details/73497528?locationNum=10&fps=1
window.addeventlistener使用方法:https://www.cnblogs.com/ConfidentLiu/p/7815624.html