诗梦-三合一万能收款二维码源码

2017年8月20日22:32:00 14 9,652

最近火的收款码合并,它能将微信收款码,QQ收款码支付宝收款码合并为一个二维码,感觉很神奇,其实原理非常简单,无论是支付宝还是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>诗梦-万能收款码</title>
  8. <link rel="shortcuticon" href="https://m.mom1.cn/favicon.ico" />
  9. <script>
  10.     var setting = {
  11.         // 在以下双引号中粘贴QQ钱包收款链接
  12.         qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=1045315233&ac=4BBCAB63F966718F0D1122B0AC3AA5243AEA141B073F9DD9703E04E3C6E017EB&n=??&f=wallet",
  13.         // 在以下双引号中粘贴微信收款链接
  14.         wechatUrl: "https://wx.tenpay.com/f2f?t=AQAAAIeUkbh5S2OOv6nn02Blea0%3D",
  15.         // 在以下双引号中粘贴支付宝收款链接
  16.         aliUrl: "https://qr.alipay.com/aplamp9v5twood6wfa",
  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://ww2.sinaimg.cn/large/a15b4afegy1fiw0rt77kwj2092032aa4.jpg");
  70.     }
  71.     #code-qq {
  72.         background-color: #54bc6e;
  73.     }
  74.     #code-qq>.code-title {
  75.         background-image: url("https://ww2.sinaimg.cn/large/a15b4afegy1fiw0uxpya8j20b403qaa1.jpg");
  76.     }
  77.     #code-wechat {
  78.         background-color: #54bc6e;
  79.     }
  80.     #code-wechat>.code-title {
  81.         background-image: url("https://ww2.sinaimg.cn/large/a15b4afegy1fiw0w2er9aj2092032t94.jpg");
  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">扫描以上二维码向诗梦付款</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">长按以上二维码向诗梦付款</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">长按以上二维码向诗梦付款</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>

图片是base64!

PX:因有人说代码太长了,现在图片链接全部换成新浪的外链!
广告也精彩
诗梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:14   其中:访客  7   博主  7

    • avatar 今非昔比 来自天朝的朋友 QQ浏览器 Windows 10 广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园) 1

      这代码真够长的。。

        • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器  Android 6.0 Redmi Note 4 Build/MRA58K 广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园)

          @今非昔比 图片是base64?

          • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园)

            @今非昔比 现在图片链接换成新浪的外链了

          • avatar 狂放 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园) 1

            图片BASE64干嘛,这代码长的该用文件发了

              • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园)

                @狂放 现在图片链接换成新浪的外链

              • avatar 菜鸟博客 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园) 1

                贵博的新浪外链好方便!

                  • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器  Android 6.0 Redmi Note 4 Build/MRA58K 广东省广州市海珠区 腾讯云服务器(广州市海珠区新港中路397号TIT创意园)

                    @菜鸟博客 谢谢?

                  • avatar xoin.me 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省 移动 1

                    我很早就尝试过类似的方法https://github.com/Xoin-Yang/weixin_alipay_php
                    支付宝没关系,但是微信并不能直接跳转到祝福界面,会有一个提示,大概是说“XXX链接不受信任”之类的。您是怎么解决的

                      • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省长沙市 电信

                        @xoin.me 评论

                          • avatar xoin.me 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省 移动 1

                            @诗梦 因为我的域名、服务器、CDN都是在阿里,所以微信一度成了瓶颈,然后就再没继续下去了。
                            原理和你的应该是类似,通过判断浏览器UA经行不同跳转 :razz:

                        • avatar 乐子区 来自天朝的朋友 谷歌浏览器 Windows XP 中国 移动 1

                          还可以这样啊。厉害了
                          http://leziqu.com/2504.html

                          • avatar 雨晨 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省常州市 电信 0

                            大佬,微信收款的wxp短链接怎么解析成http

                              • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器  Redmi Note 4 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36 广东省广州市 电信

                                @雨晨 以前用二维码识别工具识别出二维码链接,现在不知道

                              • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器  Redmi Note 4 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36 广东省广州市 电信

                                我也不会啊,不想跟你说话并向你丢了一朵小黄花 :twisted: