qq、wx、支付宝三合一收款码

GitHub下载慢可以前往码云下载

qq微信支付宝三合一在线生成

  • 艺术二维码
  • 二维码简化

演示网站:https://qr.no0a.cn
项目地址:https://github.com/BWmelon/qrcode

移动端

前言

最初接触到收款码三合一是芝麻收款,刚开始是免费的,后来价格变成了5rmb生成一次。之后用过两个收款码生成系统,一个是收款啦 ,还有一个是优启梦收款码,前面一个用起来挺方便的,就是二维码识别得比较慢,自己想改接口但是没学过php也做不了什么。后面一个是买的源码,用了一段时间提示什么小媳妇让我把你站禁了( ̄▽ ̄)~*,找了作者之后前一段时间又提示让买源码。。。想把他这个限制给取消了,但是刚看完html+css教程的我只能束手无策,于是就萌生了自己搞一个生成系统的想法。

前前后后弄了几个星期,基本上是在边百度边看文档中度过的,因为刚学这个,很多东西也没接触过。把这个系统功能分析了一下,觉得这个全靠html+css+js可以实现,然后就开始百度一步一步实现需求了。

原理

分析之后发现只需要两个页面。

  • 生成页面

这个就是网站主页面,有两个功能,一个是上传qq、微信、支付宝收款码并将它们解析成链接,还有一个是将这几个链接合起来,然后生成合并之后的二维码。解析和生成都是用了jQuery的qrcode插件,为了美观,用canvas绘制收款码的样式。

  • 收款页面

当移动设备扫描了之前生成的收款码,这个页面被打开并会获取收款码中传入的三个参数(qq、微信、支付宝链接),然后根据浏览器UA判断当前是什么软件扫的二维码,qq和微信不能直接唤起支付,这时显示二维码界面供用户长按付款,支付宝可以直接进去转账页面。

这样的话这个网站就做好了,生成页面借鉴了收款啦优启梦收款码,为了不太单调而且不把他们的功能生搬硬套的弄过来,想了一会就弄了个换色的功能(感觉没什么用,完全是凑内容的哈哈),如果需要其他样式的话,可以去他们的网站生成。还有因为这三个收款码链接加起来特别长,生成的二维码比较密集(也就是丑),然后就通过suo.im新浪短网址将长网址缩短,这样生成的二维码就会简单一点。

使用

  1. 下载源码,上传到自己的服务器或虚拟主机。
  2. 打开index.html,选择引用图片的方式,默认为引用淘宝图片,速度快。如果不想使用淘宝图片,可以使用引用本地图片方式,文件中已注明。
  3. /js/index.js中更换自己的支付宝红包码和红包口令,如不需要生成界面的红包广告则删除相关代码,文件中已标明。

如果遇到什么问题的话请反馈,虽然我也不一定能解决ヾ(๑╹◡╹)ノ"

添加自定义新样式

1、添加样式背景图

  • 使用外部图片链接方式,如淘宝链接:

上传图片到各大图床,如淘宝图床,然后获取图片链接,然后在index.html 页面中 "swiper-wrapper" 类下添加代码:
<div class="swiper-slide" style="background-image:url(这是外部图片链接)" mould-name="new"></div>

其中mould-name="new">中的new为自定义样式名。

  • 使用本地图片方式:

将背景图添加到 ./imgs/bgimgs/ 文件夹下,文件名以 "new.png" 为例,然后在 index.html 页面中 "swiper-wrapper" 类下添加样式:

<div class="swiper-slide" style="background-image:url(imgs/bgimgs/new.png)"></div>

其中的new也为样式名。

2、打开根目录下 config.json 文件,添加json数据,根节点名必须为样式名,如 "new",其他子节点参考下表:

参数名类型说明参考
qrWidth整数二维码宽度300
qrHeight整数二维码高度,建议和二维码宽度相同300
foreground字符串二维码前景色,支持十六进制、rgb、rgba"#000", "rgb(0, 0, 0)", "rgba(0, 0, 0, 0.5)"
background字符串二维码背景色,支持十六进制、rgb、rgba"#fff", "rgb(255, 255, 255)", "rgba(255, 255, 255, 0.5)"
imgWidth整数背景图宽度900(其他尺寸未兼容)
imgHeight整数背景图高度1200(其他尺寸未兼容)
font字符串字体和大小"70px '黑体'"
fontColor字符串文字颜色(未填写收款名则不生成)"#fff", "rgb(255, 255, 255)", "rgba(255, 255, 255, 0.5)"
recNameLeft空串或整数文字距离左侧距离,建议为空串,此时文本将自适应居中显示"", 100
recNameTop整数文字距离顶部距离170
qrLeft整数二维码距离左侧距离270
qrTop整数二维码距离顶部距离320

这样就成功添加了一个新的样式,新增的json内容内容大致为下图所示(图片中写错了,应该是new而不是new.png):

参考

3、小提示:
如果不想在背景中生成收款名,可以将fontColor属性设为transparent。

如需修改样式滑动效果,可以参考Swiper中文网文档。

演示

PC端:
可以使用拖动图片或者滑动滚轮选择样式
PC端

移动端:
仅可拖动图片选择样式

移动端

感激

部分样式来源于芝麻收款和第九工场,如有侵权,请联系删除。

最后修改:2019 年 09 月 22 日 09 : 18 PM
如果觉得我的文章对你有用,请随意赞赏

19 条评论

  1. 自由

    大佬大佬,支付宝扫码领红包弹窗怎么去掉呢?/js/index.js里的代码删掉了

    1. BWmelon
      @自由

      清除一下浏览器缓存试试

  2. 95Cloud

    那个上传支付宝收款码时候显示解析失败 重新上传也是

    1. BWmelon
      @95Cloud

      点一下网站右上角的“有问题找我”,然后把收款码发到群里看看

  3. 十七

    请问一下这个数据保存在什么地方?

    1. BWmelon
      @十七

      二维码里面

  4. Wrysmile

    你好,这个安全吗?会不会留有信息留存之类的

    1. BWmelon
      @Wrysmile

      没有,信息都保存在生成的二维码中

  5. 啊啊啊

    下载地址呢

    1. BWmelon
      @啊啊啊

      https://github.com/BWmelon/qrcode/archive/master.zip

  6. 喻城

    支持大佬

  7. 稻草人

    感谢分享,东西很不错,请问怎么更改弹窗的二维码?

    1. BWmelon
      @稻草人

      弹窗二维码是张图片,可以去二维码美化网站生成,然后上传到服务器引入

  8. Adun

    你好,请问支持支付后的接口回调吗?

    1. BWmelon
      @Adun

      没有回调

  9. 刘忙

    你好!可以拿走用吗!需要注意什么

    1. BWmelon
      @刘忙

      可以,更改一下弹窗信息

  10. 宋生

    云闪付目前挺火的,有这一块的资源吗?

    1. BWmelon
      @宋生

      没了解过

发表评论