具体流程网上都有，主要说一下前端开发者应该主要的，简单的说就两步。

1，获取所需要的参数信息（和后台开发沟通）

getWxPayInf() {
      PayApi.GetWxPay({ money: Math.abs(+this.payNumber), Title: this.title })
        .then(res => {
          if (res.ErrorCode == 1) {
            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(res.Data);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

2，调用微onBridgeReady(wxdata) {      let { appId, timeStamp, nonceStr, paySign } = wxdata;

      let _that = this;
      let paySuccess = JSON.stringify({
        MerchantID: +window.localStorage.getItem("userID"),
        Payment: Math.abs(+this.payNumber),
        Title: this.title,
        BillDetails: this.payIdArray,
        PayMethodName: "WXZF",
        OrderNo: wxdata.orderno
      });
      WeixinJSBridge.invoke(//在微信环境下就有这个对象，不用担心
        "getBrandWCPayRequest",
        {
          appId: appId, //公众号名称，由商户传入
          timeStamp: timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: nonceStr, //随机串
          package: wxdata.package,
          signType: "MD5", //微信签名方式：
          paySign: paySign //微信签名
        },
        function(res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            let wxcode = window.localStorage.getItem("wxcode");
            window.location.href = '根据业务逻辑进行跳转';
　　　　　　　这个里面很坑，不能写逻辑，目前我发现只能跳转页面，
　　　　　　　使用vue的this.$router.push是不可以的
　　　　　　　alert()都不填出来　　　　　

　　　　　　　window.location.href才可以跳转，如果跳转发现url传参有坑可以看我上一篇文章

} else if (res.err_msg == "get_brand_wcpay_request:cancel") { _that.$vux.alert.show({ content: "用户取消支付" }); } else { _that.$vux.alert.show({ content: "支付失败" }); } } ); },