Separate public accounts before and after vue to transfer WeChat payment

A few days ago, I used the WeChat public
account . This time I used the Vue front-end php back-end to provide the interface. Whether it is MVC or the separation of front and rear, the idea of ​​WeChat payment is the same.
In MVC, the WeChat data must be assigned in advance and carried in the view template when the payment is transferred. View template page data to WeChat request.
In the separation before and after, you need to set a monitoring event to trigger the event first. Request the server WeChat data to this page, and then another method to carry the requested parameters to WeChat request. The
following is the vue reference code. Hope it will help

    commitClick () {
    
    
      if (this.radio == 2) {
    
    
        this.$layerText('微信公众号仅支持微信支付')
        return
      }
      //自己的参数
      var params = {
    
    
        fee: this.fee,
        type: 1
      }
      //请求服务端 获取微信数据
      this.$api.Payment.wechat({
    
    params}).then(res => {
    
    
        this.list = res
        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()
        }
      // eslint-disable-next-line handle-callback-err
      }).catch(err => {
    
    

      })
    },
    onBridgeReady () {
    
    
      window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
    
    
          'appId': this.list.appId, // 公众号名称，由商户传入
          'timeStamp': this.list.timeStamp, // 时间戳，自1970年以来的秒数
          'nonceStr': this.list.nonceStr, // 随机串
          'package': this.list.package,
          'signType': this.list.signType, // 微信签名方式：
          'paySign': this.list.paySign // 微信签名
        },
        function (res) {
    
    
          // alert(JSON.stringify(res))
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
    
    
          // 使用以上方式判断前端返回,微信团队郑重提示：
          // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            alert('支付成功')
          }
          if (res.err_msg === 'get_brand_wcpay_request:cancel') {
    
    
          // 使用以上方式判断前端返回,微信团队郑重提示：
          // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            alert('取消支付')
          }
        })
    }