微信支付流程

1、首先要在微信商户平台（pay.weixin.qq.com）上配支付的链接，否则在实际操作中，最后支付时提示“当前页面的URL未注册”。

2、支付时，接口中要求传用户openid，而获取openid则需要在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。（这也是为什么测试环境无法测试的原因，因为域名不同）

3、请求创建订单接口，后端统一下单获取 orderId 并返回

4、根据返回的 orderId ，请求订单详情接口，获取详情信息

5、选择微信支付方式，判断是微信浏览器还是普通浏览器
（1）是微信浏览器则直接请求微信授权的链接，需要传递给微信重定向回的页面，及订单id

if (this.isWeixin && isMobile()) {
   let redirectUri = location.origin + '/weChat'
   window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=******&redirect_uri=' + encodeURI(redirectUri) + '&response_type=code&scope=snsapi_base&state=' + this.order.orderId + '#wechat_redirect'
} 

（2）非微信浏览器微信付款，获取微信支付二维码，扫码支付

this.wxData = {
    orderId: this.order.orderId,//订单id
    amount: this.order.totalPrice,//订单价格
    serviceName: this.serviceName//商品名称
}
// 获取微信支付二维码
paymentWxpayApi(this.wxData).then(res => {
   if (res.status === 200) {
         this.qrcode = res.data
         this.checkPayStatus()
     }
})
// 轮询查询支付状态
checkPayStatus () {
   this.getOrderStatus = setInterval(() => {
      getOrderStatusApi(this.wxData.orderId).then(res => {
          if (res.status === 200) {
             if (res.data === 4) {
               this.payStatus = 'paySuccess'
               this.wxPayShow = false
               clearInterval(this.getOrderStatus)
               if (this.$route.name === 'eventSaleDetail') {
                 this.$router.push('/orderDetail/' + this.wxData.orderId)
               }
             }
            } else {
              this.payStatus = 'payError'
              clearInterval(this.getOrderStatus)
            }
          }).catch(e => {
           clearInterval(this.getOrderStatus)
        })
   }, 1000)
}

6、上一步获取授权之后，就会拿到code，及传递的订单id，会以query的形式拼在重定向的路由上，然后通过拿到的code和订单id去请求后台获取该支付对应的需要的参数，后端返回。

let _query = this.$route.query
if (Object.keys(_query).length > 0 && _query.code) {
    wxChatPublicPayApi({
        code: _query.code,
        orderId: _query.state
   }).then(res => {
      // 防止微信端手机返回重复调用接口
      if (!res.data.success) {
         this.$router.go(-1)
         return
      }
      this.params = res.data.operateCallBackObj
      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()
      }
   })
}

7、拿到后台返回的参数之后，直接调用微信的api即可