微信中间页拿code的方式，去适配多个页面支付。。只配一个支付域
2018-11-22 本文已影响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>
当然你可以在这个页面加个加载标识。。。
