简单的网页实现QQ微信支付宝三合一支付二维码

2
9,747 ℃

A+

所属分类：建站开发

当你需要收款的时候面临着不同的支付软件而需要放置不同的支付二维码烦恼吗？

在这里只需要一个简单的网页就能够实现三合一支付二维码

代码如下


<script>
var setting = {
    // 在以下双引号中粘贴QQ钱包收款链接
    qqUrl: "这里需要填写你自己的QQ收款二维码的链接",
    // 在以下双引号中粘贴微信收款链接
    wechatUrl: "这里需要填写你自己的微信收款二维码链接",
    // 在以下双引号中粘贴支付宝收款链接
    aliUrl: "这里需要填写你自己的支付宝收款二维码的链接",
    // 用于动态生成二维码的API，连图官方的，不需要修改。
    qrcodeApi: "http://qr.liantu.com/api.php?text="
    /*
    备用二维码api：
    http://s.jiathis.com/qrcode.php?url=
    http://www.kuaizhan.com/common/encode-png?large=true&data=
    http://b.bshare.cn/barCode?site=weixin&url=
    http://pan.baidu.com/share/qrcode?w=150&h=150&url=
    */
}
</script>

全部代码


<!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>扫一扫向东阁知云捐赠</title>  
  
    <script>  
    var setting = {  
        // 在以下双引号中粘贴QQ钱包收款链接  
        qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=843551101&ac=08DA1039429AB9FEABAE5FCBB39AF70194633F7CFC07DC521598722D36BB55E6&n=ζั͡D ั͡i ั͡o ั͡s ั͡&f=wallet",         
          
        // 在以下双引号中粘贴微信收款链接  
        wechatUrl: "wxp://f2f0h7ruPwcDtiZ3aYBYGsyFGtOegUNA70SC",  
          
        // 在以下双引号中粘贴支付宝收款链接  
        aliUrl: "HTTPS://QR.ALIPAY.COM/FKX06863WN9JVSROARRDA8",  
          
        // 用于动态生成二维码的API，连图官方的，不需要修改。  
        qrcodeApi: "http://qr.liantu.com/api.php?text="      
        /* 
        备用二维码api： 
        http://s.jiathis.com/qrcode.php?url= 
        http://www.kuaizhan.com/common/encode-png?large=true&data= 
        http://b.bshare.cn/barCode?site=weixin&url= 
        http://pan.baidu.com/share/qrcode?w=150&h=150&url= 
        */  
    }  
    </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: #ffffff;  
    }  
    .code-title {  
        height: 100px;  
        background-color: #ffffff;  
        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("/images/wnm.png");  
    }  
      
    #code-qq {  
        background-color: #ffffff;  
    }  
    #code-qq>.code-title {  
        background-image: url("/images/qqqb.jpg");  
    }  
      
    #code-wechat {  
     background-color: #ffffff;    }  
    #code-wechat>.code-title {   
        background-image: url("/images/wxzf.jpg");  
          
    }  
    </style>      
  
<!-- moshang.pw Baidu tongji analytics -->  
<script>  
var _hmt = _hmt || [];  
(function() {  
var hm = document.createElement("script");  
hm.src = "https://hm.baidu.com/hm.js?c1750b98b1bc2d58027052d39fba6382";  
var s = document.getElementsByTagName("script")[0];  
s.parentNode.insertBefore(hm, s);  
})();  
</script>  
</head>  
<body>  
    <!-- 万能收款码展示区域 -->  
<div class="code-item" id="code-all">  
        <div class="code-area">  
           <img id="page-url" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">  
     
                   </div>           
            <div class="code-footer">请使用QQ，微信，支付宝客户端打开</div>  
    </div>  
      
    <!-- QQ钱包二维码展示区域 -->  
    <div class="code-item" id="code-qq">  
        <div class="code-title"></div>  
        <div class="code-area">  
            <img id="qq-url" src="qq.png">  
        </div>  
        <div class="code-footer">长按以上二维码向东阁知云付款</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">长按以上二维码向东阁知云付款</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编码函数 
     * 输入参数：待编码的字符串 
     * 输出参数：编码好的 
     ****************************************/  
    function urlEncode(String) {  
        return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");    
    }  
    </script>  
  
</body>  
</html>