微信公众号 网页支付的实现

1、支付js引用添加

2、具体的实现流程：

1.首先获取到支付订单号

2.根据支付订单号获取支付参数

3.通过JavaScript调用getBrandWCPayRequest接口，发起微信支付请求，用户进入支付流程

4.用户成功支付点击完成按钮后，商户的前端会收到JavaScript的返回值。商户可直接跳转到支付成功的静态页面进行展示。

5.商户后台收到来自微信开放平台的支付成功回调通知，标志该笔订单支付成功。

3、支付实例

//假设用户进行充值

async chargeClick() {
      if (!this.validaPhone()) return;
      if (!this.userName) {
        this.$toast('请输入会员姓名');
        return;
      }
      if (!this.cashMoney || isNaN(this.cashMoney) || this.cashMoney <= 0) {
        this.$toast('请输入正确金额');
        return;
      }

      if ((this.cashMoney + '').split('.')[1] && (this.cashMoney + '').split('.')[1].length > 2) {
        this.$toast('金额最多输入两位小数');
        return;
      }
      let data = {
        ShopNo: this.shopId, // 门店编号,
        Name: this.userName, //会员姓名,
        Phone: this.userPhone, //手机号,
        RechargeMoney: +this.cashMoney //充值金额
      };
      let res = await customerRecharge(data);
      if (res.IsSuccess) {
        this.getPayParams(res.Result.OuterMiJiRechargeOrderNo);
      }
    },

	//通过支付订单号获取支付参数
    async getPayParams(orderNo) {
      const params = {
        M: false,
        OrderNo: orderNo
      };
      let res = await getwxjsapiparam(params);
      if (res.IsSuccess) {
        this.appParams = res.Result;
        this.initPay();
      }
    },

//获取到支付参数后调用微信支付api 进行支付
initPay() {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },

    onBridgeReady() {
      const that = this;

      WeixinJSBridge.invoke('getBrandWCPayRequest', this.appParams, function(res) {
        var msg = res.err_msg.split(':')[1];
        if (msg === 'ok') {
          // that.$toast('支付成功');
          that.$router.replace('/recharge/rechargeSuccess');
        } else if (msg === 'cancel') {
          that.$toast('用户取消支付');
        } else {
          that.$toast(msg);
        }
      });
    },