美文网首页前端忐忑历程
前端微信支付,调用微信支付

前端微信支付,调用微信支付

作者: 小鳄鱼的大哥哦 | 来源:发表于2018-01-10 16:39 被阅读440次

    微信支付功能很简单,前端开发该功能时建议安装一个微信调试工具,



    开发微信相关功能时很方便。
    下面上代码

    //WeixinJSBridge 是微信内置对象,支付功能只能在微信端才能使用
    function wxPay(){
        //需要先判断是否是微信浏览器,并且微信内置包是否加载完成
        //有时会出现当触发事件的时候微信内置包还未加载完成,必须加上下面判断
        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(appId,timeStamp,nonceStr,package,paySign);
        }
    }
    
    //api方法
    function onBridgeReady(appId,timeStamp,nonceStr,package,paySign) {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": appId, //需要在微信绑定商户号,成功之后会生成有appid   
                "timeStamp": timeStamp, //时间戳,自1970年以来的秒数,前端需要从后台获取该数据     
                "nonceStr": nonceStr, //随机串,前端需要从后台获取该数据     
                "package": package,//前端需要从后台获取该数据     
                "signType": "MD5", //微信签名方式,默认为"MD5",也可以从后台获取
                "paySign": paySign //微信签名,前端需要从后台获取该数据 
            },
            function(res) {
                //这个步骤非常重要,调试期间会报上相应的错误信息,因为微信调试工具是无法实际支付的,并且微信上是无法调试的,只能在这里alert
                alert(res.err_msg);
                if(res.err_msg == "get_brand_wcpay_request:ok") {
                    //购买成功之后需要做的事...
                    alert('购买成功');
                } // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            }
        );
    }
    

    相关文章

      网友评论

        本文标题:前端微信支付,调用微信支付

        本文链接:https://www.haomeiwen.com/subject/izvonxtx.html