收款码三合一原理及简单PHP实现

经常见到各种微信支付宝QQ收款码三合一的二维码，这其中的原理其实很简单。首先扫码后客户端请求一个网址，该网站根据请求的ua判断是哪种浏览器请求，然后再重定向到另一个网址或显示另一个扫码二维码。

首先，对3种平台的收款二维码进行解码后(如可使用草料解码(https://cli.im/deqr))，会发现其实都是一个链接。

微信： wxp://f2f0P9Hh3qi-Fd0tuIpu4WrxjL0wbhEQjV29

QQ： https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQkOa33gUYpN6Y7AU%3D_xxx_sign&u=1540223760&n=sky%E7%84%A1%E8%99%95%E4%B8%8D%E5%9C%A8%F0%9F%85%A5

支付宝： https://qr.alipay.com/fkx05544jtsjcjvifwxeo5f

因此，可以直接用php实现一个网页，通过判断ua进行不同的重定向和显示即可。为什么不能全部直接重定向？因为QQ和微信只有通过扫那个链接的二维码才能打开付款界面，只有支付宝的可以直接打开那个链接就可以跳转到付款界面。废话不多说，直接上代码：

<?php

function isWxClient()
{
    return strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false;
}
function isAliClient()
{
    return strpos($_SERVER['HTTP_USER_AGENT'], 'Alipay') !== false;
}
function isQQClient()
{
    return strpos($_SERVER['HTTP_USER_AGENT'], 'QQ/') !== false;
}

$payurl = 'http://pay.qianxiao.fun';
$title = "浅笑的收款码";
$tipcolor = "#347cc2";
if(isWxClient()){
    $payurl = 'wxp://f2f0P9Hh3qi-Fd0tuIpu4WrxjL0wbhEQjV29';
    $title = "WeChat";
    $tipcolor = "#46a638";
}elseif (isAliClient()) {
    $payurl = 'https://qr.alipay.com/fkx05544jtsjcjvifwxeo5f';
    header('Location: '.$payurl."'"); #支付宝访问直接重定向
    exit();
}elseif (isQQClient()) {
    $payurl = 'https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQkOa33gUYpN6Y7AU%3D_xxx_sign&u=1540223760&n=sky%E7%84%A1%E8%99%95%E4%B8%8D%E5%9C%A8%F0%9F%85%A5';
    $title = "QQ";
    $tipcolor = "#347cc2";
}
?>

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php echo $title; ?></title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-size: 16px;
            touch-action: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        body {
            font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif
        }

        .code-item {
            width: 100%
        }

        .ui-flex-pack-center {
            -webkit-box-pack: center
        }

        .ui-flex-ver {
            -webkit-box-orient: vertical
        }

        .ui-flex-align-center {
            -webkit-box-align: center
        }

        h1, h2, h3, h4, h5 {
            margin: 0
        }

        .ui-panel {
            display: -webkit-box;
            width: 100%;
            -webkit-box-sizing: border-box
        }

        h1 {
            font-size: 25px
        }

        #ui-head {
            background-color: #fff;
            padding: 10px 0
        }

        h2 {
            font-size: 16px;
            font-weight: 400
        }

        .ui-tips {
            background-color: #fff;
            color: <?php echo $tipcolor; ?>;
            font-size: 20px;
            text-align: center;
            padding: 5px 0;
            margin: 25px auto;
            width: 240px;
            border-radius: 20px
        }

        .ui-qrcode {
            background-color: #fff;
            border-radius: 15px;
            width: 230px;
            height: 230px;
            margin: 0 auto;
            text-align: center;
            padding: 10px;
        }

        .ui-qrcode img {
            width: 210px;
            height: 210px;
            margin-top: 10px;
            -webkit-user-drag: none;
            -webkit-touch-callout: none;
        }

        .ui-paytext {
            border-bottom: 1px dotted #fff;
            margin: 0 auto;
            width: 210px;
            height: 25px
        }

        #ui-setps {
            color: #fff;
            text-align: center;
            font-size: 14px
        }

        #ui-setps i {
            font-size: 30px
        }

        .ui-circle {
            background-color: #fff;
            border-radius: 50%;
            color: #46a638;
            text-align: center;
            font-size: 11px;
            width: 16px;
            height: 16px;
            line-height: 16px;
            margin: 0 auto;
            margin-bottom: 10px
        }

        #ui-setps > div {
            padding: 15px 10px 0 10px
        }

        .ui-box {
            -webkit-box-flex: 1
        }

        .ui-padtop10 {
            padding-top: 8px
        }

        #color {
            background-color: #049fda;
        }

        .ui-weixinlogo {
            width: 55px;
            height: 55px;
            background: url('static/images/user.jpg');
            background-size: 100% 100%;
            margin: 5px;
            border-radius: 30px
        }

        @font-face {
            font-family: iconfont;
            src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff')
        }

        .iconfont {
            font-family: iconfont, serif !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .icon-icon-check-solid:before {
            content: "\e672"
        }

        .icon-changan:before {
            content: "\e83e"
        }

        .icon-erweima:before {
            content: "\e607"
        }
    </style>

</head>
<body id="color">
<script>
    window.msg = false;
    switch (document.title) {
        case "QQ":
            document.getElementById('color').style.background = "#049fda";
            break;
        case "WeChat":
            document.getElementById('color').style.background = "#54bc6e";
            break;
        case "Alipay":
            document.getElementById('color').style.background = "#1477ff";
            break;
        default:
            document.getElementById('color').style.background = "#049fda";
            window.msg = true;
            break;
    }
</script>
<div class="code-item" id="code-all">
    <div id="ui-head" class="ui-panel ui-flex-pack-center ui-flex-align-center">
        <div class="ui-weixinlogo">
            <i class="logo">
            </i>
        </div>
        <div>
            <h1>
                扫码支付
            </h1>
            <h2>
                浅笑的收款码
            </h2>
        </div>
    </div>
    <br>
    <div class="ui-box ui-panel ui-flex-align-center">
        <div id="ui-content" class="ui-panel ui-flex-ver ui-flex-pack-center">
            <div class="ui-tips">
                <script>
                    if (msg) {
                        document.write("请扫描二维码支付")
                    } else {
                        document.write("请长按二维码支付")
                    }
                </script>
            </div>
            <br>
            <div class="ui-qrcode">
                <div id="qrcode"></div>
                <div class="erweima" hidden></div>
            </div>
            <div class="ui-paytext">
            </div>
            <div id="ui-setps" class="ui-panel ui-flex-pack-center">
                <div>
                    <div class="ui-circle">
                        1
                    </div>
                    <i class="icon iconfont icon-changan">
                    </i>
                    <div class="ui-padtop10">
                        <script>
                            if (msg) {
                                document.write("QQ微信<br/>支付宝")
                            } else {
                                document.write("长按二维码")
                            }
                        </script>
                    </div>
                </div>
                <div>
                    <div class="ui-circle">
                        2
                    </div>
                    <i class="icon iconfont icon-erweima">
                    </i>
                    <div class="ui-padtop10">
                        <script>
                            if (msg) {
                                document.write("选择扫描<br/>二维码")
                            } else if(document.title == 'WeChat'){
                                document.write("识别图中的二维码")
                            } else {
                                document.write("选择扫描二维码")
                            }
                        </script>
                    </div>
                </div>
                <div>
                    <div class="ui-circle">
                        3
                    </div>
                    <i class="icon iconfont icon-icon-check-solid">
                    </i>
                    <div class="ui-padtop10">
                        <script>
                            if (msg) {
                                document.write("输入金额<br/>完成支付")
                            } else {
                                document.write("输入金额支付")
                            }
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/jquery.qrcode.min.js"></script>
<script>
    $(() => {
        $('.erweima').qrcode({
            render: "canvas",
            width: 500,
            height: 500,
            foreground: "#1C1C1C",
            background: "#FFFFFF",
            correctLevel: 2,
            text: "<?php echo $payurl; ?>"
        });
        function canvasToImage(canvas) {
            const image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }
        $('#qrcode').append(canvasToImage(document.getElementsByTagName('canvas')[0]));
    });
</script>
</body>
</html>

代码简单易懂，直接通过php判断后显示html，其中根据不同ua，显示不同的链接二维码、背景颜色、提示文本等。

具体效果大家可以参考我的三合一收款码：http://pay.qianxiao.fun。

另外，如果大家懒的自己写，推荐可以直接使用教书先生的三合一收款码系统（https://qrpay.oioweb.cn）。

发表评论 取消回复

发表评论取消回复