模拟微信内部跳转至微信支付

前言

微信支付比支付宝或者其它方式要来的更复杂一些，但在我这个项目中，大部分的工作量后台都帮我处理好了，实际上只需要调用两个接口，weChatPaymentFirst
和WeChatPaymentSecond（这是后台封装好的接口）

微信支付步骤介绍

微信支付分为三步：

1. 根据用户信息调weChatPaymentFirst接口，返回url（中间页面），根据url跳转去中间页面。这个url中有一部分信息是rediect_url,这个url是通过微信内部认证过的域名（这里要引入一个重定向的概念，最终目的我们要跳转去中间页面，但实际上我们要从微信内部转一圈再去中间页面），后面还会返回两个重要的参数code和state
2. 根据上一步返回数据中的url，直接跳转至中间页面，在这个页面上将code和state获取下来（正则），然后用这个两个参数调第二个接口WeChatPaymentSecond，该接口的返回值是微信支付的六大参数
3. 根据这六大参数，取调用微信的API实现支付
   ps：后台帮我做的事情：
   a. 获取跳转中间页面的url
   b. 获取微信支付六大参数

具体代码

点击确认支付按钮，执行toPay()完成支付第一步

toPay() {
  //跳转到微信支付
  //window.location.href = 'weixin://';
  this.freight = this.$route.query.freight
  //TODO:获取真实数据
  let data = {
    "customerId": this.customerId,
    "freight": 0,
    "orderActivityDetailVMList": [],
    "orderId": 290,
    "orderNumber": "",
    "partnerId": 201,
    "supplierId": 8,
    "tradeMoney": 0.3
  }
  let token = JSON.parse(localStorage.getItem("cat"));
  WeChatPaymentFirst(data,token).then(res=>{
    if(res.code == CODE_SUCCESS){
      this.url = res.data
      //alert(this.url)
      window.location.href = this.url//跳转至中间页面
    }
  })
}

中间页面，完成支付后两步

methods:{
  WeChatPaymentSecondCall(verifyParams){
    return ajax('pay/weChatPaymentSecond', 'post',{params:verifyParams})
  },
  getParams(){
    var reg1 = new RegExp("(\\?|&)code([^&]*)(?=(&|$))");
    var reg2 = new RegExp("(\\?|&)state([^&]*)(?=(#|&))");
    this.url = window.location.toString()
    alert(this.url)
    this.code = this.url.match(reg1)[0].split("=")[1]
    this.state = this.url.match(reg2)[0].split("=")[1]
    alert(this.code)
    let verifyParams = {
      "code" :this.code,
      "state" :this.state
    }

    this.WeChatPaymentSecondCall(verifyParams).then(res => {
      if(res.code ==CODE_SUCCESS){
        let appId = res.data.appId
        let timeStamp = res.data.timeStamp
        let nonceStr = res.data.nonceStr
        let packages = res.data.packages
        let signType = res.data.signType
        let paySign = res.data.paySign

        function onBridgeReady(){
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',{
              "appId": appId,     //公众号名称，由商户传入
              "timeStamp": timeStamp,         //时间戳，自1970年以来的秒数
              "nonceStr": nonceStr, //随机串
              "package": packages,
              "signType": signType,         //微信签名方式：
              "paySign": paySign //微信签名
            },
            function (res) {
              if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                // TODO: 支付订单
                if (!this.finished) {
                  this.$router.replace('status')
                }
              }
            }
          );
        }

        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 {
          onBridgeReady();
        }
      }
    })
  }
}