V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
imhx233
V2EX  ›  分享创造

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

  •  
  •   imhx233 ·
    hifocus · 2018-12-22 23:08:14 +08:00 · 3563 次点击
    这是一个创建于 1923 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Merger Render Poster

    好经常见到各种游戏厂商在发布新游戏的时候发一篇 发行日记。那么,今天冬至,我也来为我的新开源项目 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 就是合并者的意思。

    长什么样

    这样:

    Screenshots

    为什么要做这个

    之前用孟坤博客的支付二维码合并程序,发现满页的 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 - 发布虚拟世界里的日常

    没话说了。冬至快乐。

    18 条回复    2018-12-25 14:48:15 +08:00
    hugee
        1
    hugee  
       2018-12-22 23:29:12 +08:00 via Android
    好长....看不完...
    nosky
        2
    nosky  
       2018-12-22 23:40:41 +08:00 via Android
    收钱吧?
    imhx233
        3
    imhx233  
    OP
       2018-12-22 23:57:27 +08:00
    @nosky 那是针对商户的一站式集成服务器 这个是免费开源针对个人的
    Senventise
        4
    Senventise  
       2018-12-23 03:18:16 +08:00 via Android
    以前写过一个,但是微信会拦截没有备案的域名,自己又不想去备案,就弃坑了
    imhx233
        5
    imhx233  
    OP
       2018-12-23 10:06:21 +08:00
    suley
        6
    suley  
       2018-12-23 12:39:52 +08:00
    我觉得你写文章比写代码强。
    imhx233
        7
    imhx233  
    OP
       2018-12-23 13:50:40 +08:00
    @suley 太真实了(
    写代码我确实弱的不行
    rcteya76084
        8
    rcteya76084  
       2018-12-23 15:11:53 +08:00
    试试美团的商户二维码。。。
    imhx233
        9
    imhx233  
    OP
       2018-12-23 15:48:22 +08:00
    @rcteya76084 您也说是商户了啊……个人呢

    另外怎么就这么多人觉得 [已经有类似的东西 你还写这个干嘛]
    hester
        10
    hester  
       2018-12-24 13:40:41 +08:00 via Android
    请问付款完毕后会回到这个页面吗?
    如果能的话,是否可以得到付款金额等?
    hester
        11
    hester  
       2018-12-24 13:42:07 +08:00 via Android
    @hester #16
    我是不是理解错了,这只是个二维码服务?
    shaojz2005
        12
    shaojz2005  
       2018-12-25 09:17:25 +08:00
    这只是个界面把二维码聚合在一起吧
    rocy
        13
    rocy  
       2018-12-25 11:50:33 +08:00
    demo 的背景渐变 抄的 cowtransfer 的吧。。一模一样
    imhx233
        14
    imhx233  
    OP
       2018-12-25 14:42:18 +08:00   ❤️ 1
    @hester 不是,这只是个人的服务,没接入商家 API,是得不到的
    imhx233
        15
    imhx233  
    OP
       2018-12-25 14:42:34 +08:00
    @shaojz2005 您要是强行这么说,也没问题
    imhx233
        16
    imhx233  
    OP
       2018-12-25 14:44:10 +08:00
    @rocy 您理解错了,请您参阅 https://github.com/hifocus/Merger#credit,我是给出了 Credit 的

    您说的那个 cowtransfer 我看了下,确实一模一样,那只能说明他们的是抄的并且没有给 credit
    imhx233
        17
    imhx233  
    OP
       2018-12-25 14:46:28 +08:00
    @rocy 请在 https://background.cowtransfer.com/version/1545706338085/css/app.css 里面搜索 Gradient,可以看到我 Credit 里面的 https://codepen.io/P1N2O/pen/pyBNzX 一毛一样的代码,所以您应该向他们提出质疑而不是还没有看过 README 就质疑我
    imhx233
        18
    imhx233  
    OP
       2018-12-25 14:48:15 +08:00
    我发现在座的很多位连上面几百个字的说明都没看完,更别说 GitHub 中英双语的 README 了,然后先跑来质疑我或者说 这就是个 xxx 吧

    ???
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   979 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 22:09 · PVG 06:09 · LAX 15:09 · JFK 18:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.