Merger.html 发行日记：走心的开源二维码合并程序 “实际上大有不同”

[imhx233]

​

好经常见到各种游戏厂商在发布新游戏的时候发一篇 发行日记。那么，今天冬至，我也来为我的新开源项目 hifocus/Merger 发一篇发行日记吧。

Demo 站点：https://demo.qrcdn.com

GitHub 地址：https://github.com/hifocus/Merger/

最新 Stable Release：https://github.com/hifocus/Merger/releases/latest

正式英文文档：https://github.com/hifocus/Merger/blob/master/README.md

正式中文文档：https://github.com/hifocus/Merger/blob/master/README_CN.md

---

这是什么

Merger 是一个 HTML 响应式模板，本质上是一个能够把三个收款二维码（微信，支付宝，QQ 钱包）合并成一个的小东西，实际上大有不同。

名字取自英语单词 “ Merge 合并”，Merger 就是合并者的意思。

长什么样

这样：

为什么要做这个

之前用孟坤博客的支付二维码合并程序，发现满页的 data:image 很辣眼睛，就自己魔改了一个所谓 CDN 版本，但是终究不是自己的东西。后来就想着自己写，从二月到现在尝试了几次都失败了。直到现在掌握了 CVM 开发模式的精髓，才勉勉强强写了出来。前后写了三天，期间数不清的 Bug 数不清的错误，都一个一个修好了。虽然天下没有完美的程序，但是最少各种环境测试了很多次都没有任何问题，所以就 发布了。

我要感谢孟坤。就算现在我的 Merger 颜值上比他的合并程序好上太多，但是依然需要借鉴一点点的代码（我都留了 Credit ），另外那个程序估计只是他随手写的。

做了，就做着玩。就做成开源项目。就写双语文档。就做成想要的样子。

做到了。做完了。

有需求吗

说实话，没啥。但是聊胜于无。

但是，有了这个，你网站不需要再放三个收款码（而是一个），日常生活中让别人给你打钱的时候也不需要满相册找付款二维码（直接聊天内扔一条链接过去即可）。还有其他应用场景等待挖掘。有了这个，就摆脱了三个二维码，就摆脱了付款二维码截图。

如果身边有人在线下卖东西的，给他们做一个，找打印店用最好的铜版纸最好的色彩打印出来，几块钱的成本，也不失为一个好礼物。

有啥功能吗

有。很多。用我构思时候的逻辑描述下吧。

首先，传统的多合一二维码，如果在桌面端打开会显示所谓 “万能码”，任何设备都需要扫码，然后二次识别（支付宝除外）。但是我一直在想，如果是在桌面端打开的话，为什么不直接展示相应的二维码，用户一次扫码即达，体验不是好很多吗。于是做到了。如果 Merger 识别到 UserAgent 为 桌面 / 移动 端浏览器，就会显示四个按钮（嗯，除了微信支付宝 QQ 钱包还有一个 Paypal ），用户选哪个就弹出个 modal，上面显示最终的二维码（也就是你在 app 里面生成的那个），直接一扫就好（移动端需要屏幕截图然后选择扫一扫从 i 安策选择）。如果用户选择 Paypal，就会弹出个 iframe，手机的比例，就可以给钱了（移动端是打开一个新的标签页）。

第二，如果用户直接在 QQ 支付宝 微信 里面打开 Merger，会有一个焊死车门的操作。就是说用 Javascript 代码把除了 modal （和里面的二维码以及提示语）以外的所有东西删掉，用户无法做任何额外的操作，只能够扫码（当然可以不扫 然后按返回）。支付宝就直接跳转了网速快的话甚至看不到 Merger 的界面。

第三，如果在桌面端扫码，modal 上的标题会显示相应的 app 名称 + 扫一扫 向 xxx 付款。比如用户选择微信支付，就会提示，微信扫一扫 给惶心付款。

第四，大量可直接配置变量。你可以在一开始的 Script 标签直接填入你的 微信 支付宝 QQ 钱包 Paypal 链接，然后你需要一条外链链接一下你的头像，以及 var 一下你的名字（网名，真名 随便你了）就行。想要的话网页上的两行字也可以直接修改。除非想要魔改，不然就是填一下空的事情。然后其他事情都已经帮你搞定了。压缩打包上传到服务器解压缩三连，然后随便找啥 cli.im 之类的生成个二维码，就能给别人扫了。考虑到有人可能没有 Paypal，到时候按钮在但是点不了就很尴尬了，所以只要把 var paypal = "xxx" 那行注释掉，Paypal 的按钮就不存在了。

第五，修代码模式，也就是 Debug Mode。如果有大佬看得起想要魔改 Merger 的话，在变量里面开启（默认也是开的）就可以方便地看到各种主要功能是否有在工作（比如说焊死车门是否成功）。

你还有什么想说的？

没啥。就是一个很久的心愿突然实现了。这是我第一次尝试写 Javascript，感觉还不错。虽然很多都依赖 Google 搜索，（换了熟练的大佬可能分分钟就写好我这个东西了 我写了三天），一共写了三千五百行代码然后删掉了接近两千行，还行吧……最少这东西估计能用，能挺好用，就满足了。

做开源呢，一个是想让更多人看到，一个是想给自己积累点经验和知识，为以后做准备吧。

这是一个走心的项目。如果喜欢的话，给个 star 吧。js 写的很乱，很烂，如果有大佬看得过眼的 pull request 什么的是非常欢迎的。

也请完整阅读说明文档（这个不是），看不懂英文（其实写的很烂）也有中文的（写得更烂 因为是直译），遵守开源许可证，也就没别的了。

用到的别人的东西都已经给了 Credit，如果有遗漏麻烦 issue 告知，谢谢。

GitHub 地址：https://github.com/hifocus/Merger/

最新 Stable Release：https://github.com/hifocus/Merger/releases/latest

正式英文文档：https://github.com/hifocus/Merger/blob/master/README.md

正式中文文档：https://github.com/hifocus/Merger/blob/master/README_CN.md

---

博客： https://tech.hxco.de - 发布日常文章以及各种奇奇怪怪的教程

频道： https://t.me/huangxinn - 发布虚拟世界里的日常

没话说了。冬至快乐。

[hugee]

好长....看不完...

[nosky]

收钱吧？

[imhx233]

@nosky 那是针对商户的一站式集成服务器 这个是免费开源针对个人的

[Senventise]

以前写过一个，但是微信会拦截没有备案的域名，自己又不想去备案，就弃坑了

[imhx233]

@Senventise 可以尝试这里的方法 https://github.com/hifocus/Merger#icp-notice-for-china

[suley]

我觉得你写文章比写代码强。

[imhx233]

@suley 太真实了（
写代码我确实弱的不行

[rcteya76084]

试试美团的商户二维码。。。

[imhx233]

@rcteya76084 您也说是商户了啊……个人呢

另外怎么就这么多人觉得 [已经有类似的东西 你还写这个干嘛]

[hester]

请问付款完毕后会回到这个页面吗？
如果能的话，是否可以得到付款金额等？

[hester]

@hester #16
我是不是理解错了，这只是个二维码服务？

[shaojz2005]

这只是个界面把二维码聚合在一起吧

[rocy]

demo 的背景渐变 抄的 cowtransfer 的吧。。一模一样

[imhx233]

@hester 不是，这只是个人的服务，没接入商家 API，是得不到的

[imhx233]

@shaojz2005 您要是强行这么说，也没问题

[imhx233]

@rocy 您理解错了，请您参阅 https://github.com/hifocus/Merger#credit，我是给出了 Credit 的

您说的那个 cowtransfer 我看了下，确实一模一样，那只能说明他们的是抄的并且没有给 credit

[imhx233]

@rocy 请在 https://background.cowtransfer.com/version/1545706338085/css/app.css 里面搜索 Gradient，可以看到我 Credit 里面的 https://codepen.io/P1N2O/pen/pyBNzX 一毛一样的代码，所以您应该向他们提出质疑而不是还没有看过 README 就质疑我

[imhx233]

我发现在座的很多位连上面几百个字的说明都没看完，更别说 GitHub 中英双语的 README 了，然后先跑来质疑我或者说 这就是个 xxx 吧

？？？