index.html


<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Pay</title>
        <style>
        #code-wechat {
            text-align: center;
            margin: 20% 7%;
        }
        img {
            max-width: 70%;
            max-height: 70%;
        }
        .prompt {
            margin: 10%;
            font-size: 120%;
        }
        </style>
    </head>
    <body>
        <div id="code-wechat" style="display:none">
                <div class="prompt">长按识别以下二维码付款</div>
                <img id="wechat-url" />
        </div>
        <script>
            var setting = {
                wechatUrl: "wxp://f2f0sZ9Nv3BIYSI8kIWw5BPWy73hIM8if8MM",
                aliUrl: "https://qr.alipay.com/fkx08267fw3lrqorwtkz649",
                qrcodeApi: "https://api.qrserver.com/v1/create-qr-code/?data="
            };
            if (
                !/^http(s*):\/\//.test(location.href) ||
                /^http(s*):\/\/localhost/.test(location.href)
            ) {
                alert("在本地打开无效，请上传到GitHub/GitLab或静态网站！");
            }
            if (navigator.userAgent.match(/Alipay/i)) {
                window.location.href = setting.aliUrl;
            } else if (navigator.userAgent.match(/MicroMessenger\//i)) {
                document.getElementById("code-wechat").style.display = "block";
                document.getElementById("wechat-url").src =
                    setting.qrcodeApi + urlEncode(setting.wechatUrl);
                document.getElementById("code-wechat").style.display = "block";
            } else {
                alert("请使用支付宝或微信扫描二维码！")
            }
            function urlEncode(String) {
                return encodeURIComponent(String)
                    .replace(/'/g, "%27")
                    .replace(/"/g, "%22");
            }
        </script>
    </body>
</html>