zoukankan      html  css  js  c++  java
  • 微信公众号支付,iframe跨域

    官方文档: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

  • 相关阅读:
    Git 分支管理
    Git 保存工作区
    Git 版本控制
    Git 基本命令-详细版本
    Git 初始化配置
    Git 基本概念:分区
    JavaScript 调试
    JavaScript 错误
    JS 判断字符串是否全部为字母
    JS 判断输入字符串是否为数字、字母、下划线组成
  • 原文地址:https://www.cnblogs.com/cxscode/p/13451048.html
Copyright © 2011-2022 走看看