自制三合一多功能收款码
Posted egsec
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自制三合一多功能收款码相关的知识，希望对你有一定的参考价值。
通过判断你是使用QQ，微信还是支付宝扫码支付的方式，制作一款不管你是用这三者中的哪一个扫描，都可以支付的收款码。
直接上代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>EGSec - 收款码</title> 8 <link rel="shortcuticon" href="https://blog.tcp123.cn/favicon.ico" /> 9 <script> 10 var setting = { 11 // 在以下双引号中粘贴QQ钱包收款链接 12 qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQg4TkmAQYveDQ8AU%3D_xxx_sign&u=1125712387&n=EG", 13 // 在以下双引号中粘贴微信收款链接 14 wechatUrl: "wxp://f2f0_4HEas_V2v0JM0yrRer9WV6WgxkJ1gnt", 15 // 在以下双引号中粘贴支付宝收款链接 16 aliUrl: "https://qr.alipay.com/fkx08293focdyghubhn9a30", 17 // 用于动态生成二维码API 18 qrcodeApi: "https://www.kuaizhan.com/common/encode-png?large=true&data=" 19 /* 20 备用二维码api： 21 http://s.jiathis.com/qrcode.php?url= 22 http://www.kuaizhan.com/common/encode-png?large=true&data= 23 http://b.bshare.cn/barCode?site=weixin&url= 24 http://pan.baidu.com/share/qrcode?w=150&h=150&url= 25 */ 26 } 27 </script> 28 <style> 29 * { 30 margin: 0; padding: 0; 31 font-family: Microsoft yahei; 32 } 33 body { 34 background-color: #fff; 35 } 36 .code-item { 37 width: 100%; 38 max-width: 400px; 39 margin: 0 auto; 40 padding-bottom: 1px; 41 display: none; 42 background-color: #5c92ef; 43 } 44 .code-title { 45 height: 100px; 46 background-color: #f2f2f2; 47 background-position: center; 48 background-repeat: no-repeat; 49 background-size: 50%; 50 } 51 .code-area { 52 text-align: center; 53 } 54 .code-area>img { 55 margin: 80px 0; 56 width: 60%; 57 min-width: 100px; 58 } 59 .code-footer { 60 height: 80px; 61 text-align: center; 62 background-color: #fff; 63 color: #666; 64 line-height: 80px; 65 font-size: 20px; 66 margin: -2px 2px 2px 2px; 67 } 68 #code-all>.code-title { 69 background-image: url("https://ae01.alicdn.com/kf/Hf128fa6dc81042308a0067e6ce1309d8z.png"); 70 } 71 #code-qq { 72 background-color: #54bc6e; 73 } 74 #code-qq>.code-title { 75 background-image: url("https://ae01.alicdn.com/kf/Ha9e8ae195c2a477eab7e6df4bca6f254a.png"); 76 } 77 #code-wechat { 78 background-color: #54bc6e; 79 } 80 #code-wechat>.code-title { 81 background-image: url("https://ae01.alicdn.com/kf/H4750a12d54bc476083c636860454187eo.png"); 82 } 83 </style> 84 </head> 85 <body> 86 <!-- 万能收款码展示区域 --> 87 <div class="code-item" id="code-all"> 88 <div class="code-title"></div> 89 <div class="code-area"> 90 <img id="page-url" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="> 91 </div> 92 <div class="code-footer">扫描以上二维码向EGSec付款</div> 93 </div> 94 <!-- QQ钱包二维码展示区域 --> 95 <div class="code-item" id="code-qq"> 96 <div class="code-title"></div> 97 <div class="code-area"> 98 <img id="qq-url" src="https://ww2.sinaimg.cn/large/a15b4afegy1fiw0xfoj1wj20gu0g50uc.jpg"> 99 </div> 100 <div class="code-footer">长按以上二维码向EGSec付款</div> 101 </div> 102 <!-- 微信二维码展示区域 --> 103 <div class="code-item" id="code-wechat"> 104 <div class="code-title"></div> 105 <div class="code-area"> 106 <img id="wechat-url" src="https://ww2.sinaimg.cn/large/a15b4afegy1fiw11kh5u3j203o03r3yn.jpg"> 107 </div> 108 <div class="code-footer">长按以上二维码向EGSec付款</div> 109 </div> 110 <script> 111 if(navigator.userAgent.match(/Alipay/i)) { 112 // 支付宝 113 window.location.href = setting.aliUrl; 114 } else if(navigator.userAgent.match(/MicroMessenger//i)) { 115 // 微信 116 document.getElementById("wechat-url").src = setting.qrcodeApi + urlEncode(setting.wechatUrl); 117 document.getElementById("code-wechat").style.display = "block"; 118 } else if(navigator.userAgent.match(/QQ//i)) { 119 // QQ 120 document.getElementById("qq-url").src = setting.qrcodeApi + urlEncode(setting.qqUrl); 121 document.getElementById("code-qq").style.display = "block"; 122 } else { 123 // 其它，显示“万能码” 124 document.getElementById("page-url").src = setting.qrcodeApi + urlEncode(window.location.href); 125 document.getElementById("code-all").style.display = "block"; 126 } 127 /***************************************** 128 * url编码函数 129 * 输入参数：待编码的字符串 130 * 输出参数：编码好的 131 ****************************************/ 132 function urlEncode(String) { 133 return encodeURIComponent(String).replace(/‘/g,"%27").replace(/"/g,"%22"); 134 } 135 </script> 136 </body> 137 </html>
修改以下代码：
将修改后的HTML文件上传至自己的服务器即可。