我们经常会见到一些商家只使用一个二维码就可以对支付宝,微信以及其它方式收款
(例如这个收款码
一些平台也会提供二维码的制作,但是很多时候会因为对方停止服务导致收款码失效
如果拥有一个完全属于自己的三合一收款码呢?好了废话不多说,直接上源码

如果是小白的话只需要根据下面的注释修改即可~
如果你懂得相关语言的话可以自行修改一些其它的内容,让它发挥其它的作用(例如让它变成不同平台的好友添加码聚合版)

请根据自己的需求修改后上传至服务器使用

请复制以下代码,并保存为.html文件,并根据提示修改(二维码的链接可以通过二维码解码网站获得(例如草料二维码))


<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zabiy的收款码</title>
    
    <script>
    var setting = {
        // 在以下双引号中修改自己的QQ收款链接
        qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=4425B53BDF93F368F1B809A71AD5A52D4D54816FED899014E5B87C342AE8D74D&u=1257072935&n=Zabiy",
        
        // 在以下双引号中修改自己的微信收款链接
        wechatUrl: "wxp://f2f0BLcXBQHTBaATsqjJBr5t9RnsPOGyVAbQ",
        
        // 在以下双引号中修改自己的支付宝收款链接
        aliUrl: "https://qr.alipay.com/fkx06183n5kbbbyyirqsg92",
        
        // 用于生成二维码的API,可修改为自己已有的API。
        qrcodeApi: "http://qr.liantu.com/api.php?text="    

    }
    </script>
    
    <style>
    * {
        margin: 0; padding: 0;
        font-family: Microsoft yahei;
    }
    body {
        background-color: #fff;
    }
    .code-item {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding-bottom: 1px;
        display: none;
        background-color: #5c92ef;
    }
    .code-title {
        height: 100px;
        background-color: #f2f2f2;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50%;
    }
    .code-area {
        text-align: center;
    }
    .code-area>img {
        margin: 80px 0;
        width: 60%;
        min-width: 100px;
    }
    .code-footer {
        height: 80px;
        text-align: center;
        background-color: #fff;
        color: #666;
        line-height: 80px;
        font-size: 20px;
        margin: -2px 2px 2px 2px;
    }
    
    #code-all>.code-title {
        background-image: url("https://ww2.sinaimg.cn/large/a15b4afegy1fiw0rt77kwj2092032aa4.jpg");
    }
    
    #code-qq {
        background-color: #54b4ef;
    }
    #code-qq>.code-title {
        background-image: url("https://ww2.sinaimg.cn/large/a15b4afegy1fiw0uxpya8j20b403qaa1.jpg");
    }
    
    #code-wechat {
        background-color: #54bc6e;
    }
    #code-wechat>.code-title { 
        background-image: url("https://ww2.sinaimg.cn/large/a15b4afegy1fiw0w2er9aj2092032t94.jpg");
        
    }
    </style>    

</head>
<body>
    <!-- 三合一收款码显示区(汉字内容可修改) -->
    <div class="code-item" id="code-all">
        <div class="code-title"></div>
        <div class="code-area">
            <img id="page-url" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">
        </div>
        <div class="code-footer">扫描二维码向Zabiy付款</div>
    </div>
    
    <!-- QQ钱包二维码展示区域 -->
    <div class="code-item" id="code-qq">
        <div class="code-title"></div>
        <div class="code-area">
            <img id="qq-url" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">
        </div>
        <div class="code-footer">长按二维码向Zabiy付款</div>
    </div>
    
    <!-- 微信二维码展示区域 -->
    <div class="code-item" id="code-wechat">
        <div class="code-title"></div>
        <div class="code-area">
            <img id="wechat-url" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">
        </div>
        <div class="code-footer">长按二维码向Zabiy付款</div>
    </div>
    
    <script>
    if(navigator.userAgent.match(/Alipay/i)) {
        // 支付宝
        window.location.href = setting.aliUrl; 
    } else if(navigator.userAgent.match(/MicroMessenger\//i)) {
        // 微信
        document.getElementById("wechat-url").src = setting.qrcodeApi + urlEncode(setting.wechatUrl);
        document.getElementById("code-wechat").style.display = "block";
    } else if(navigator.userAgent.match(/QQ\//i)) {
        // QQ
        document.getElementById("qq-url").src = setting.qrcodeApi + urlEncode(setting.qqUrl);
        document.getElementById("code-qq").style.display = "block";
    } else {
        // 其它,显示“收款码”
        document.getElementById("page-url").src = setting.qrcodeApi + urlEncode(window.location.href);
        document.getElementById("code-all").style.display = "block";
    }
    
    /*****************************************
     * url编码函数
     * 小白谨慎修改无标注内容
     * UTF-8编码
     ****************************************/
    function urlEncode(String) {
        return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");    
    }
    </script>

</body>
</html>