官方文档：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) {// 微信支付APIfunction 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.发送 messagewindow.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