微信公衆號 網頁支付的實現

1、支付js引用添加

 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

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);
        }
      });
    },