vue中实现微信支付

vue实现微信支付有三种方式，第一种方式是PC端支付，第二种方式是H5支付，第三种方式是微信公众号支付。其中的pc端支付，其实就是调用后端的接口，给后端传一些签名校验，后端直接返回一个支付的二维码图片，H5支付就是手机浏览器的支付，而微信公众号里面的支付我们用的是JSAPI支付，JSAPI支付的调用需要在微信商户平台申请及配置，只有开通了JASPI才有权限实现H5支付。
一、pc端支付
关于pc端的支付，这块儿是由后端直接返一个支付二维码的图片，前端做展示就好了，关于支付成功的状态，通过轮询订单详情的一个接口判断状态，然后进行页面的跳转。
二、JSAPI支付（微信公众号）

支付按钮为：

<div class="bottom-btn" @click="payOrder">立即购买</div>

方法函数：

payOrder() {
        this.postRequestWWW(this.baseUrl + '/pay/generalQRCode',{
          sessionId: this.sessionId,
          userId: localStorage.getItem('userId')
        }).then((res) =>{
          if(res.data.code === 0) {
            const pay_params = res.data.data
            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(pay_params);
          }
        }else{
          alert('微信支付调起失败！');
        }
      }).catch((err) => {
          console.log(err);
      })
      },
     onBridgeReady(params) {
        var that = this
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": params.appId,  //公众号名称，由商户传入
            "timeStamp": params.timeStamp, //支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            "nonceStr": params.nonceStr,  //支付签名随机串，不长于 32 位
            "package": params.package,//统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            "signType": 'MD5',  //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            "paySign": params.sign, //支付签名
          },
          function (res) {
            if (res.err_msg === "get_brand_wcpay_request:ok") {
              alert('支付成功！');
              that.$router.push({path: '/myOrder'})
            } else if (res.err_msg === "get_brand_wcpay_request:fail") {
              alert('支付失败！');
            }
          });
      },

payOrder函数中通过调用后台的接口，获取到自己需要的参数
三、H5支付
相对于JSAPI支付，我觉得H5支付前端需要写的代码不是很多哇，后端会返给我一个支付的路径，跳到微信支付进行操作就可以了，当然你可以设置支付成功的回调地址
正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在MWEB_URL后拼接上redirect_url参数，来指定回调页面。

如，您希望用户支付完成后跳转至https://www.wechatpay.com.cn，则可以做如下处理：（详情可见官方文档https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4）

假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096


则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

下面是我的代码：

payOrder3(){
        this.postRequestWWW(this.baseUrl + '/pay/getCodeUrl', {
          sessionId: this.sessionId,
          userId: localStorage.getItem('userId'),
          spbillCreateIp:this.clientIp
        }).then((res) => {
          if (res.data.code === 0) {
            this.payUrl = res.data.data.codeUrl
            window.location.href = this.payUrl + '&redirect_url='回调地址'
          } else {
            alert('微信支付调起失败！');
          }
        }).catch((err) => {
          console.log(err);
        })
      },

补充：当H5支付的回调地址中含有多个参数时，需使用encodeURIComponent转码，否则回调地址只会返回一个参数

const redirectUrl = '网站域名/aaaa?a=1&b=2';
window.location.href = `${this.payUrl}&redirect_url=${encodeURIComponent(redirectUrl)}`