H5中接入微信支付

h5接入微信支付

• 支付一般是有两个按钮 一个是进入充值页面的入口（此时的入口应该是后台提供的用于回调那微信中的openid用于在微信中支付）进入充值界面之后会有一个选择金额的页面选择好金额以后会有一个确定按钮 微信中内置的方法就是用户点击完确定按钮之后才进行调用

  定时器用于显示提示语（支付成功/失败...）
  setTimeDate() {
  window.clearInterval(this.timers);
  this.isPopup = true;
  this.timers = setInterval(() => {
  this.isPopup = false;
  // 用于清楚定时器
  this.isPopup == false ? window.clearInterval(this.timers) : null;
  },this.sumTime ? 2000 : 60000);
  },

• 金币接口 (当前金额)

      goldPort() {
        this.$get("v1.gold/getMyGold").then(res => {
          if (res.code == 2000) {
            this.allGold = res.data.all_gold;
          }
        });
      },
  

  //确定按钮
  confirm() {
  //执行后端接口 用于请求微信内置方法需要传入的参数
  this.getWxPay();
  },

• 请求接口

    getWxPay() {
        //传入 openid token 和 金币金额
      this.$post("v1.gold/wePay", {
        openid: this.obj.open,
        token: sessionStorage.getItem("token"),
        shopname: "金币充值",
        money: this.goldSelect
      })
        .then(res => {
        //成功之后调用微信方法 此时返回的内容 需要放在微信提供的方法里
          if (res.status) {
            this.resData = JSON.parse(res.data);
            this.orders = res.order;
            this.isWx();
          }
        }) //.catch用于捕获错误
        .catch(err => {
          console.log("请求充值接口Error Info:" + JSON.stringify(err));
        });
    },

• 判断是否是微信浏览器（微信提供的方法）

    isWx() {
      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().catch(err => {
          console.log("Error Info:" + JSON.stringify(err));
        });
      }
    },

• 微信支付

    onBridgeReady() {
      let that = this;
      //that.resData 应该是this.resData 但是这是微信内置的一个方法所以this在函数体内不生效
      //此时的that.resData是一个对象 内容是由后端返回提供的
      WeixinJSBridge.invoke("getBrandWCPayRequest", that.resData, function(
        res
      ) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          //点击成功之后
          that.sumTime = false;
          that.setTimeDate(); //调用提示语
          window.clearInterval(that.timer)
          that.timer = setInterval(() => {
     - 调用查询订单接口（后台提供）如果微信浏览器支付成功就走这一步
     - 这个方法使用来判断是否有支付到自己服务器（如果是微信支付错误微信会自动返现）
            that.queryOrder();
          }, 2000);
        } else {
          that.isPopup = true;
          that.title = "支付关闭";
          that.sumTime = true;
          that.setTimeDate();
        }
      })
    },

• 查询订单是否成功

    queryOrder() {
      this.$get("v1.gold/getOrderInfo?order=" + this.orders)
        .then(res => {
          // 进行判断code值
          if (res.code == 2000) {
            //支付成功
            // 从新赋值并调用
            this.title = "支付成功";
            window.clearInterval(this.timer)
            this.sumTime = true;
            this.setTimeDate();
          } else if (res.code == 2003) {
            //未支付
            this.title = "未支付";
            this.sumTime = true;
            window.clearInterval(this.timer)
            this.setTimeDate();
          } else if (res.code == 2004) {
            //支付关闭
            this.title = "支付关闭";
            this.sumTime = true;
            window.clearInterval(this.timer)
            this.setTimeDate();
          } else if (res.code == 2005) {
            //支付撤销
            this.title = "支付撤销";
            this.sumTime = true;
            window.clearInterval(this.timer)
            this.setTimeDate();
          } else if (res.code == 2007) {
            //支付失败
            this.title = "支付失败";
            window.clearInterval(this.timer)
            this.sumTime = true;
            this.setTimeDate();
          } else {
            this.sumTime = true;
            this.setTimeDate();
            window.clearInterval(this.timer)
          }
          this.goldPort();
        })
    }
  },

created() {
this.goldPort(); //当前金额
}