微信公众号支付接口（vue项目中，两种方法）

版权声明： https://blog.csdn.net/xiasohuai/article/details/84390654

第一种：引入微信js-sdk

//在一个地方调用this.weixin()方法，比如说按钮
 
//写微信支付方法
weixin() {
        var that = this;
        var url='';
        var params = {
          .....//价格，数量等等一类的
        };
        axios.post(url,params).then((res) => {
          var resulted = res.data.data;
          that.wxConfig = resulted;
          that.$wx.config({
            debug: false,
            appId: that.wxConfig.appid,
            timestamp: that.wxConfig.timestamp,
            nonceStr: that.wxConfig.noncestr,
            signature: that.wxConfig.signature,
            // 所有要调用的 API 都要加到这个列表中
            //要调用的微信接口
            jsApiList: [
              'chooseWXPay',
              'onMenuShareAppMessage',
              'onMenuShareTimeline',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone'
            ]
          });
          that.$wx.ready(function() {
            that.$wx.chooseWXPay({
              timestamp: that.wxConfig.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用    timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: that.wxConfig.nonceStr, // 支付签名随机串，不长于 32 位
              package: that.wxConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
              signType: that.wxConfig.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: that.wxConfig.paySign, // 支付签名
              success: function (res) {
                 paySuccessCallback();
              },
              cancel: function (res) {
                  alert('已取消支付');
              },
              fail: function (res) {
                  alert('购买失败，请重新创建订单')
              }

            });
          });
 
        })
      },

第二种  不用引入微信sdk；直接应用；

toPayPage() {//1.点击“立即支付”按钮，请求接口获取orderCode
            var url = API_ORDERS_GENERATE;
            var params = {
                buyNum: this.quantity * 1,
                commodityId: this.commodityId,
                guestBook: this.guestBook,
                commodityPrice:this.commodityPrice,
                totalPrice : (this.commodityPrice * 1) * (this.quantity * 1)
            }
            this.$post(url,params).then(res=>{
                if(res.data.retCode == 200){
                    this.orderId = res.data.data;
                    this.authorityCheckToPay(this.orderId.orderCode)
                }else{
                    //业务错误输出
                    this.Toast({
                        message: res.data.message,
                        position: 'center',
                        duration: 2000
                    })
                }
            }).catch(res=>{
                console.log(res);
            })
        },

authorityCheckToPay(orderCode) {//2.使用orderCode唤起支付
            var url = API_PAY_ORDER + orderCode;
            this.$post(url).then(res=>{
                if(res.data.retCode == 200){
                    var params = JSON.parse(res.data.data);
                    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{
                        this.onBridgeReady(params);
                     }
                }else{
                    this.Toast({
                        message: res.data.message,
                        position: 'center',
                        duration: 5000
                    })
                }
            }).catch(res=>{
                console.log(res);
            })
        },

onBridgeReady(params){//3.使用微信内部方法完成支付操作
            var _this = this;
            WeixinJSBridge.invoke(
               'getBrandWCPayRequest', params,
                function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
               // 使用以上方式判断前端返回,微信团队郑重提示：
                     //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                     _this.$router.push('homeList');
                } else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                    // alert("用户取消支付!");
                    _this.$router.push('purchaseRecord');
                }else{
                    // alert(JSON.stringify(res));
                    alert("支付失败!");
                }
            }); 
        }