通过判断你是使用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文件上传至自己的服务器即可。
原文地址：https://www.cnblogs.com/egsec/p/12316226.html
时间： 2024-09-30 06:21:51