微信中间页拿code的方式，去适配多个页面支付。。只配一个支付域名的情况。

/**
 * 通过跳转的方式去拿 openid
 * @param {String} ordersId - 订单id
 * @param {String|Number} orderFee - 订单金额
 * */
export function getOpenId (ordersId) {
  let userAgent = window.navigator.userAgent
  let isWechat = /MicroMessenger/.test(userAgent)
  let origin = window.location.origin
  let search = window.location.search
  let pathname = window.location.pathname
  // /order-pay/:orderIds/:orderFee
  let hash = `#/order/payconfirm/${ordersId}`
  // 直接跳转地址
  let packageUri = origin + pathname + search + hash
  // ------------
  if (isWechat && window.location.href.indexOf('code') === -1) {
    let appid = 'wxf2d3eddfdfd6b5e2'  //这个是appid 企业号
    let midwayIslands = origin + '/static/middle' // 支付中间页
    let redirectUri = `${midwayIslands}?package=${encodeURIComponent(packageUri)}`
    // 微信内部鉴权地址
    let weixinUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize' +
      '?appid=' + appid +
      '&redirect_uri=' + encodeURIComponent(redirectUri) +
      '&response_type=code' +
      '&scope=snsapi_base' +
      '&state=index' +
      '&connect_redirect=1#wechat_redirect'
    window.location.replace(weixinUrl)
  } else {
    // 不是微信环境
    window.location.replace(packageUri)
  }
}

中间页其实就是专门做跳转的因为传过来了 package，那么中间页的代码如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title></title>
</head>

<body>
  <script>
    var packageUrl = decodeURIComponent(getQueryValue('package'))
    var packageUrlData = parseURL(packageUrl)

    var code = getQueryValue('code')
    var hash = '#' + packageUrlData.hash
    var port = packageUrlData.port ? (':' + packageUrlData.port) : ''
    var path = packageUrlData.path
    var host = packageUrlData.host
    var protocol = packageUrlData.protocol + '://'
    var finalUrl = protocol + host + port + path + '?code=' + code + hash

    console.log(packageUrlData)
    console.log(finalUrl)

    window.location.replace(finalUrl)

    function getQueryValue (name, search) {
      if (!search) {
        search = window.location.search
      }
      var result = search.match(new RegExp('[\?\&]' + name + '=([^\&]+)', 'i'))
      if (result == null || result.length < 1 || result[1] == 'undefined') {
        return ''
      }
      return decodeURIComponent(result[1])
    }

    // url解析
    function parseURL (url) {
      var a = document.createElement('a')
      a.href = url
      return {
        source: url,
        protocol: a.protocol.replace(':', ''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function () {
          var ret = {},
            seg = a.search.replace(/^\?/, '').split('&'),
            len = seg.length, i = 0, s
          for (; i < len; i++) {
            if (!seg[i]) { continue }
            s = seg[i].split('=')
            ret[s[0]] = s[1]
          }
          return ret
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
        hash: a.hash.replace('#', ''),
        path: a.pathname.replace(/^([^\/])/, '/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
        segments: a.pathname.replace(/^\//, '').split('/')
      }
    }
  </script>
</body>

</html>

当然你可以在这个页面加个加载标识。。。

微信中间页拿code的方式，去适配多个页面支付。。只配一个支付域名的情况。

推荐阅读更多精彩内容