一、效果展示
展示地址：程序员南方者 - 万能打赏收款码
源码地址：打赏码（三合一）：支付宝、微信、QQ
效果图：
二、前言
这是原资料的内容：
三、分析与实现
进行总结一下
1 实现原理
手机使用的APP软件进行扫码时，进行检测对应的付款链接。
（如：1️⃣用支付宝扫码是跳转支付宝收款链接.2️⃣用微信扫码是跳转微信收款码链接...）
2 实现条件
1️⃣ 保存需要添加的收款（打赏）码
2️⃣ 收款（打赏）码进行转换成链接（这里使用的是草料二维码进行转换链接）
3️⃣ 网站空间（因为收款码需要中转，这里采用的是Gitee提供的Gitee Pages 服务）
3 实现过程
源码由该前辈都已写好，我们就只需要完成收款（打赏）码转换成的链接替换对应的。
后续如果要添加东西上去，可以完善得更好的，对其进行个性化万能码~
最后，再贴一下前辈写的资料地址：多合一收款二维码原理及实现(源码)
前辈写的源码地址：📱 微信、支付宝、QQ 三合一收款二维码（单文件版）
四、源码
（因为Gitee上屏蔽了阅览源码，所以这里展示一下源码吧~）
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="mengkun"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"> <title>打赏》程序员南方者》万能收款码</title> <script> /** * 本多合一收款码作者 @megnkun(https://mkblog.cn)，转载请注明！ * Github： https://github.com/mengkunsoft/OneQRCode * * 以下内容请用专门的 Html 编辑器（如 VS Code）进行编辑，切勿直接用记事本编辑，否则可能出现中文乱码！ */ var setting = { /* 在以下【双引号】中粘贴你的QQ钱包收款链接 */ qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQmdPB9gIYy8XqjgY%3D_xxx_sign&u=785410457&n=x10", /* 在以下【双引号】中粘贴你的微信收款链接 */ wechatUrl: "wxp://f2f08zeh0enIYAlY95peBnjqdjfJG7mDJZfREbgaX5uc2ycOqYalSm-NaV9S_agG6G1n", /* 在以下【双引号】中粘贴你的支付宝收款链接 */ aliUrl: "https://qr.alipay.com/fkx10058tzltavsndf8cy6a" } </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 auto; width: 60%; min-width: 100px; background: #fff; padding: 10px; border-radius: 5px; } .code-footer { height: 80px; text-align: center; background-color: #fff; color: #666; line-height: 80px; font-size: 20px; margin: 0 4px 3px 4px; } #code-all > .code-title { // background-image: url("base64太长啦，删除了"); // 这个base64太长啦，删除啦。需要的去源码地址下载吧~ } </style> </head> <body> <div><center><h1>打赏》<a href="https://nanfangzhe.gitee.io/">程序员南方者</a>》万能收款码</h1></center></div> <!-- 万能收款码展示区域 --> <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,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="> </div> <div class="code-footer">扫描以上二维码向我付款</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,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="> </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,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="> </div> <div class="code-footer">长按以上二维码向我付款</div> </div> <script> /* 二维码生成 https://github.com/lifthrasiir/qr.js/ */ !function(r,n,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():r.QRCode=t()}(this,0,function(){for(var r=[null,[[10,7,17,13],[1,1,1,1],[]],[[16,10,28,22],[1,1,1,1],[4,16]],[[26,15,22,18],[1,1,2,2],[4,20]],[[18,20,16,26],[2,1,4,2],[4,24]],[[24,26,22,18],[2,1,4,4],[4,28]],[[16,18,28,24],[4,2,4,4],[4,32]],[[18,20,26,18],[4,2,5,6],[4,20,36]],[[22,24,26,22],[4,2,6,6],[4,22,40]],[[22,30,24,20],[5,2,8,8],[4,24,44]],[[26,18,28,24],[5,4,8,8],[4,26,48]],[[30,20,24,28],[5,4,11,8],[4,28,52]],[[22,24,28,26],[8,4,11,10],[4,30,56]],[[22,26,22,24],[9,4,16,12],[4,32,60]],[[24,30,24,20],[9,4,16,16],[4,24,44,64]],[[24,22,24,30],[10,6,18,12],[4,24,46,68]],[[28,24,30,24],[10,6,16,17],[4,24,48,72]],[[28,28,28,28],[11,6,19,16],[4,28,52,76]],[[26,30,28,28],[13,6,21,18],[4,28,54,80]],[[26,28,26,26],[14,7,25,21],[4,28,56,84]],[[26,28,28,30],[16,8,25,20],[4,32,60,88]],[[26,28,30,28],[17,8,25,23],[4,26,48,70,92]],[[28,28,24,30],[17,9,34,23],[4,24,48,72,96]],[[28,30,30,30],[18,9,30,25],[4,28,52,76,100]],[[28,30,30,30],[20,10,32,27],[4,26,52,78,104]],[[28,26,30,30],[21,12,35,29],[4,30,56,82,108]],[[28,28,30,28],[23,12,37,34],[4,28,56,84,112]],[[28,30,30,30],[25,12,40,34],[4,32,60,88,116]],[[28,30,30,30],[26,13,42,35],[4,24,48,72,96,120]],[[28,30,30,30],[28,14,45,38],[4,28,52,76,100,124]],[[28,30,30,30],[29,15,48,40],[4,24,50,76,102,128]],[[28,30,30,30],[31,16,51,43],[4,28,54,80,106,132]],[[28,30,30,30],[33,17,54,45],[4,32,58,84,110,136]],[[28,30,30,30],[35,18,57,48],[4,28,56,84,112,140]],[[28,30,30,30],[37,19,60,51],[4,32,60,88,116,144]],[[28,30,30,30],[38,19,63,53],[4,28,52,76,100,124,148]],[[28,30,30,30],[40,20,66,56],[4,22,48,74,100,126,152]],[[28,30,30,30],[43,21,70,59],[4,26,52,78,104,130,156]],[[28,30,30,30],[45,22,74,62],[4,30,56,82,108,134,160]],[[28,30,30,30],[47,24,77,65],[4,24,52,80,108,136,164]],[[28,30,30,30],[49,25,81,68],[4,28,56,84,112,140,168]]],n=/^\d*$/,t=/^[A-Za-z0-9 $%*+\-./:]*$/,e=/^[A-Z0-9 $%*+\-./:]*$/,o=[],a=[-1],u=0,f=1;u<255;++u)o.push(f),a[f]=u,f=2*f^(f>=128?285:0);var i=[[]];for(u=0;u<30;++u){for(var h=i[u],s=[],c=0;c<=u;++c){var l=c<u?o[h[c]]:0,v=o[(u+(h[c-1]||0))%255];s.push(a[l^v])}i.push(s)}var p={};for(u=0;u<45;++u)p["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:".charAt(u)]=u;var g=[function(r,n){return(r+n)%2==0},function(r,n){return r%2==0},function(r,n){return n%3==0},function(r,n){return(r+n)%3==0},function(r,n){return((r/2|0)+(n/3|0))%2==0},function(r,n){return r*n%2+r*n%3==0},function(r,n){return(r*n%2+r*n%3)%2==0},function(r,n){return((r+n)%2+r*n%3)%2==0}],d=function(r){return r>6},m=function(n,t){var e=-8&function(n){var t=r[n],e=16*n*n+128*n+64;return d(n)&&(e-=36),t[2].length&&(e-=25*t[2].length*t[2].length-10*t[2].length-55),e}(n),o=r[n];return e-=8*o[0][t]*o[1][t]},w=function(r,n){switch(n){case 1:return r<10?10:r<27?12:14;case 2:return r<10?9:r<27?11:13;case 4:return r<10?8:16;case 8:return r<10?8:r<27?10:12}},C=function(r,n,t){var e=m(r,t)-4-w(r,n);switch(n){case 1:return 3*(e/10|0)+(e%10<4?0:e%10<7?1:2);case 2:return 2*(e/11|0)+(e%11<6?0:1);case 4:return e/8|0;case 8:return e/13|0}},A=function(r,n){for(var t=r.slice(0),e=r.length,u=n.length,f=0;f<u;++f)t.push(0);for(f=0;f<e;){var i=a[t[f++]];if(i>=0)for(var h=0;h<u;++h)t[f+h]^=o[(i+n[h])%255]}return t.slice(e)},x=function(r,n,t,e){for(var o=r<<e,a=n-1;a>=0;--a)o>>e+a&1&&(o^=t<<a);return r<<e|o},b=function(r,n,t){for(var e=g[t],o=r.length,a=0;a<o;++a)for(var u=0;u<o;++u)n[a][u]||(r[a][u]^=e(a,u));return r},y=function(r,n,t,e){for(var o=r.length,a=21522^x(t<<3|e,5,1335,10),u=0;u<15;++u){var f=[o-1,o-2,o-3,o-4,o-5,o-6,o-7,o-8,7,5,4,3,2,1,0][u];r[[0,1,2,3,4,5,7,8,o-7,o-6,o-5,o-4,o-3,o-2,o-1][u]][8]=r[8][f]=a>>u&1}return r},$=function(r){for(var n=function(r){for(var n=0,t=0;t<r.length;++t)r[t]>=5&&(n+=r[t]-5+3);for(t=5;t<r.length;t+=2){var e=r[t];r[t-1]==e&&r[t-2]==3*e&&r[t-3]==e&&r[t-4]==e&&(r[t-5]>=4*e||r[t+1]>=4*e)&&(n+=40)}return n},t=r.length,e=0,o=0,a=0;a<t;++a){var u,f=r[a];u=[0];for(var i=0;i<t;){for(h=0;i<t&&f[i];++h)++i;for(u.push(h),h=0;i<t&&!f[i];++h)++i;u.push(h)}e+=n(u),u=[0];for(i=0;i<t;){var h;for(h=0;i<t&&r[i][a];++h)++i;for(u.push(h),h=0;i<t&&!r[i][a];++h)++i;u.push(h)}e+=n(u);var s=r[a+1]||[];o+=f[0];for(i=1;i<t;++i){var c=f[i];o+=c,f[i-1]==c&&s[i]===c&&s[i-1]===c&&(e+=3)}}return e+=10*(Math.abs(o/t/t-.5)/.05|0)},k=function(n,t,e,o,a){var u=r[t],f=function(r,n,t,e){var o=[],a=0,u=8,f=t.length,i=function(r,n){if(n>=u){for(o.push(a|r>>(n-=u));n>=8;)o.push(r>>(n-=8)&255);a=0,u=8}n>0&&(a|=(r&(1<<n)-1)<<(u-=n))},h=w(r,n);switch(i(n,4),i(f,h),n){case 1:for(var s=2;s<f;s+=3)i(parseInt(t.substring(s-2,s+1),10),10);i(parseInt(t.substring(s-2),10),[0,4,7][f%3]);break;case 2:for(s=1;s<f;s+=2)i(45*p[t.charAt(s-1)]+p[t.charAt(s)],11);f%2==1&&i(p[t.charAt(s-1)],6);break;case 4:for(s=0;s<f;++s)i(t[s],8)}for(i(0,4),u<8&&o.push(a);o.length+1<e;)o.push(236,17);return o.length<e&&o.push(236),o}(t,e,n,m(t,o)>>3);f=function(r,n,t){for(var e=[],o=r.length/n|0,a=0,u=n-r.length%n,f=0;f<u;++f)e.push(a),a+=o;for(f=u;f<n;++f)e.push(a),a+=o+1;e.push(a);var i=[];for(f=0;f<n;++f)i.push(A(r.slice(e[f],e[f+1]),t));var h=[],s=r.length/n|0;for(f=0;f<s;++f)for(var c=0;c<n;++c)h.push(r[e[c]+f]);for(c=u;c<n;++c)h.push(r[e[c+1]-1]);for(f=0;f<t.length;++f)for(c=0;c<n;++c)h.push(i[c][f]);return h}(f,u[1][o],i[u[0][o]]);var h=function(n){for(var t=r[n],e=function(r){return 4*r+17}(n),o=[],a=[],u=0;u<e;++u)o.push([]),a.push([]);var f=function(r,n,t,e,u){for(var f=0;f<t;++f)for(var i=0;i<e;++i)o[r+f][n+i]=u[f]>>i&1,a[r+f][n+i]=1};f(0,0,9,9,[127,65,93,93,93,65,383,0,64]),f(e-8,0,8,9,[256,127,65,93,93,93,65,127]),f(0,e-8,9,8,[254,130,186,186,186,130,254,0,0]);for(u=9;u<e-8;++u)o[6][u]=o[u][6]=1&~u,a[6][u]=a[u][6]=1;var i=t[2],h=i.length;for(u=0;u<h;++u)for(var s=0==u?h-1:h,c=0==u||u==h-1?1:0;c<s;++c)f(i[u],i[c],5,5,[31,17,21,17,31]);if(d(n)){var l=x(n,6,7973,12),v=0;for(u=0;u<6;++u)for(c=0;c<3;++c)o[u][e-11+c]=o[e-11+c][u]=l>>v++&1,a[u][e-11+c]=a[e-11+c][u]=1}return{matrix:o,reserved:a}}(t),s=h.matrix,c=h.reserved;if(function(r,n,t){for(var e=r.length,o=0,a=-1,u=e-1;u>=0;u-=2){6==u&&--u;for(var f=a<0?e-1:0,i=0;i<e;++i){for(var h=u;h>u-2;--h)n[f][h]||(r[f][h]=t[o>>3]>>(7&~o)&1,++o);f+=a}a=-a}}(s,c,f),a<0){b(s,c,0),y(s,0,o,0);var l=0,v=$(s);for(b(s,c,0),a=1;a<8;++a){b(s,c,a),y(s,0,o,a);var g=$(s);v>g&&(v=g,l=a),b(s,c,a)}a=l}return b(s,c,a),y(s,0,o,a),s},L={generate:function(r,o){var a={numeric:1,alphanumeric:2,octet:4},u={L:1,M:0,Q:3,H:2},f=(o=o||{}).version||-1,i=u[(o.ecclevel||"L").toUpperCase()],h=o.mode?a[o.mode.toLowerCase()]:-1,s="mask"in o?o.mask:-1;if(h<0)h="string"==typeof r?r.match(n)?1:r.match(e)?2:4:4;else if(1!=h&&2!=h&&4!=h)throw"invalid or unsupported mode";if(null===(r=function(r,e){switch(r){case 1:return e.match(n)?e:null;case 2:return e.match(t)?e.toUpperCase():null;case 4:if("string"==typeof e){for(var o=[],a=0;a<e.length;++a){var u=e.charCodeAt(a);u<128?o.push(u):u<2048?o.push(192|u>>6,128|63&u):u<65536?o.push(224|u>>12,128|u>>6&63,128|63&u):o.push(240|u>>18,128|u>>12&63,128|u>>6&63,128|63&u)}return o}return e}}(h,r)))throw"invalid data format";if(i<0||i>3)throw"invalid ECC level";if(f<0){for(f=1;f<=40&&!(r.length<=C(f,h,i));++f);if(f>40)throw"too large data"}else if(f<1||f>40)throw"invalid version";if(-1!=s&&(s<0||s>8))throw"invalid mask";return k(r,f,h,i,s)},generatePNG:function(r,n){n=n||{};var t,e=L.generate(r,n),o=Math.max(n.modulesize||5,.5),a=Math.max(null!=n.margin?n.margin:4,0),u=e.length,f=o*(u+2*a),i=document.createElement("canvas");if(i.width=i.height=f,!(t=i.getContext("2d")))throw"canvas support is needed for PNG output";t.fillStyle="#fff",t.fillRect(0,0,f,f),t.fillStyle="#000";for(var h=0;h<u;++h)for(var s=0;s<u;++s)e[h][s]&&t.fillRect(o*(a+s),o*(a+h),o,o);return i.toDataURL()}};return L}); /* 防止有些人下载后直接打开，然后问怎么扫不出来…… */ if(!(/^http(s*):\/\//.test(location.href)) || /^http(s*):\/\/localhost/.test(location.href)) { // alert('本收款码需要网站空间进行中转，请先部署到网站下再使用'); // window.location.href='https://github.com/mengkunsoft/OneQRCode'; } if(navigator.userAgent.match(/Alipay/i)) { /* 支付宝 */ window.location.href = setting.aliUrl; } else if(navigator.userAgent.match(/MicroMessenger\//i)) { /* 微信 */ document.getElementById("wechat-url").src = QRCode.generatePNG(setting.wechatUrl, { margin: 0 }); document.getElementById("code-wechat").style.display = "block"; } else if(navigator.userAgent.match(/QQ\//i)) { /* QQ */ document.getElementById("qq-url").src = QRCode.generatePNG(setting.qqUrl, { margin: 0 }); document.getElementById("code-qq").style.display = "block"; } else { /* 其它，显示“万能码” */ document.getElementById("page-url").src = QRCode.generatePNG(window.location.href, { margin: 0 }); document.getElementById("code-all").style.display = "block"; } </script> </body> </html>
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
