vue 单页项目教程--微信公众号(微信支付遇到的坑)

http://www.cnblogs.com/greedying/p/6359229.html
这个博主已经写的很清楚了。这里简单写一下 【微信支付路径要求二级或以上路径】的坑。

1首先。跳到选择支付页面reservedPay,保证reservedPay页面为二级页面。

  submit:function(){

     window.location.href="/Pay/reservedPay;
  }
  {
    path: '/Pay/reservedPay',
    component: function (resolve) {
      require(['./reserved/reserved_pay'], resolve)
    }
  },

reservedPay页面

  /**
       * @method:ajax请求数据方法
       */
      postData:function(params) {
        var vm = this;
        this.REQAjax("payReseredFee",params, function (result) {
          if(params.payType==0){//钱包支付方法
            vm.$router.push("/reservedBerth");
          }else if(params.payType==2){//微信支付方法
            vm.weixinPay(result.data);
          }
        })
      },
      /**
       * @method :微信支付方法
       * @param data
       */
      weixinPay:function(data){
        var vm= this;
        if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档
          if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
          }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
            document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
          }
        }else{
          vm.onBridgeReady(data);
        }
      },
      /**
       * @method 支付费用方法
       * @param data:后台返回的支付对象,(详情微信公众号支付API中H5提交支付);
       */
      onBridgeReady:function(data){
        var  vm = this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',{
            "appId":data.appId,     //公众号名称,由商户传入
            "timeStamp":data.timeStamp, //时间戳,自1970年以来的秒数
            "nonceStr":data.nonceStr, //随机串
            "package":data.package,
            "signType":data.signType, //微信签名方式:
            "paySign":data.paySign //微信签名
          },
          function(res){
            // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            if(res.err_msg == "get_brand_wcpay_request:ok" ){
              vm.$router.push("/reservedBerth");
            }else{
              alert("支付失败,请跳转页面"+res.err_msg);
            }
          }
        );
      }
    },

你可能感兴趣的:(html5,vue,微信,支付,vue)