1、由于只要一个回调地址,通过本页面作为中间页,判断然后跳转到不同的域名。假如我们有多个地址需要做微信扫码登录,比如我们的研发环境,测试环境,生产环境都需要做微信扫码登陆,但又不想给研发测试环境做外网的端口映射,那么可以使用这种方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信登陆</title>
</head>
<body>
<script>
function getUrlParams(key) {
var args = {};
var pairs = location.search.substring(1).split('&');
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos === -1) {
continue;
}
args[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1));
}
return args[key];
}
function getRealRedirectUrl(env) {
var realRedirectUrl = 'http://yw.chouxiaowa.cn/plugins/salesman/pc/index/middle_page';
if ('dev' == env) {
realRedirectUrl = 'http://yw.chouxiaowa.cn';
} else if ('test' == env) {
realRedirectUrl = 'http://192.168.1.10:30080';
} else if ('pre-prod' == env) {
realRedirectUrl = 'http://yw.chouxiaowa.cn';
}
return realRedirectUrl;
}
function appendParams(params, url) {
var baseWithSearch = url.split('#')[0];
var hash = url.split('#')[1];
for (var i = 0; i < params.length; i++) {
if (params[i].value !== undefined) {
var newParam = params[i].key + "=" + params[i].value;
if (baseWithSearch.indexOf('?') > 0) {
var oldParamReg = new RegExp(params[i].key + '=[-\\w]{0,40}', 'g');
if (oldParamReg.test(baseWithSearch)) {
baseWithSearch = baseWithSearch.replace(oldParamReg, newParam);
} else {
baseWithSearch += "&" + newParam;
}
} else {
baseWithSearch += "?" + newParam;
}
}
}
if (hash) {
url = baseWithSearch + '#' + hash;
} else {
url = baseWithSearch;
}
return url;
}
var code = getUrlParams('code');
var appId = getUrlParams('appid');
var scope = getUrlParams('scope') || 'snsapi_login';
var state = getUrlParams('state') || Math.random();
var env = getUrlParams('env');
var request = getUrlParams('request') || '/plugins/salesman/pc/index/middle_page';
var redirectUrl;
if (!code) {
redirectUrl = appendParams([{
key: 'appid',
value: appId
}, {
key: 'redirect_uri',
value: encodeURIComponent(location.href)
// value: encodeURIComponent("http://kj.chouxiaowa.cn/plugins/organization/pc/pub/ywy_login")
}, {
key: 'response_type',
value: 'code'
}, {
key: 'scope',
value: scope
}, {
key: 'state',
value: state
}], 'https://open.weixin.qq.com/connect/qrconnect');
} else {
redirectUrl = appendParams([{ key: 'code', value: code }, {
key: 'state',
value: state
}], getRealRedirectUrl(env)); // + request
}
// console.log(redirectUrl, redirectUrl.split("="), request, env)
location.href = redirectUrl;
// window.close();
</script>
</body>
</html>
2、可以使用第三方插件,将微信二维码内嵌到本页面
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
function get_wx_qrcode(appid, redirect_uri) {
//从微信的开发文档不难看出回调域名需要经过encodeURIComponent处理
var obj = new WxLogin({
self_redirect: false, //值为true时,直接在二维码的弹窗中进行页面跳转及其余操作,
id: "login_container", //需要承载二维码的容器id
appid,
scope: "snsapi_login", //网页授权,目前网页只有这一种方式,静默授权
redirect_uri, //回调域名(地址前部分是项目域名,后部分loginSuccess是微信需要跳转的路径(vue中的路由名称))
// redirect_uri: encodeURIComponent(location.origin), //回调域名(地址前部分是项目域名,后部分loginSuccess是微信需要跳转的路径(vue中的路由名称))
state: Math.random(),
style: "white",
href: ""
});
}