1, because only one callback address, through this page as the middle page, judge and then jump to a different domain name. If we have multiple addresses that need to do wechat scan login, for example, our R&D environment, testing environment and production environment all need to do wechat scan login, but we do not want to do external network port mapping for r&d test environment, then we can use this method.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WeChat landing</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(The '#') [0];
            var hash = url.split(The '#') [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 + The '#' + 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>
Copy the code

2. Third-party plug-ins can be used to embed the wechat QR code into this page

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
function get_wx_qrcode(appid, redirect_uri) {
    // From the development document of wechat, it is not difficult to see that the callback domain name needs to be processed by encodeURIComponent
    var obj = new WxLogin({
        self_redirect: false.// When the value is true, jump to the page and perform other operations directly in the pop-up window of the TWO-DIMENSIONAL code.
        id: "login_container".// The id of the container that needs to carry the QR code
        appid,
        scope: "snsapi_login".// Web page authorization. Currently, there is only one way for web pages, silent authorization
        redirect_uri, // Callback domain name (the first part of the address is the project domain name, and the last part of loginSuccess is the path wechat needs to jump to (route name in VUE))
        // redirect_uri: encodeURIComponent(location.origin), // callback domain name
        state: Math.random(),
        style: "white".href: ""
    });
}
Copy the code