美文网首页
微信中间页拿code的方式,去适配多个页面支付。。只配一个支付域

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

作者: 轩辕无枫 | 来源:发表于2018-11-22 17:01 被阅读0次
    /**
     * 通过跳转的方式去拿 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的方式,去适配多个页面支付。。只配一个支付域

          本文链接:https://www.haomeiwen.com/subject/jnalqqtx.html