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

博主： BWmelon
发布时间：2019 年 01 月 19 日
14839次浏览
62 条评论
3119字数
分类： js

GitHub下载慢可以[前往码云](https://gitee.com/BWmelon/qrcode)下载

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

- 艺术二维码
 - 二维码简化

演示网站：[https://qr.no0a.cn](https://qr.no0a.cn)
项目地址：[https://github.com/BWmelon/qrcode](https://github.com/BWmelon/qrcode)

![移动端](https://imgs.bwmelon.com/20190922201943.png)

## 前言

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

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

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

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

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

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

## 使用

1. 下载源码，上传到自己的服务器或虚拟主机。
 2. 打开index.html，选择引用图片的方式，默认为引用淘宝图片，速度快。如果不想使用淘宝图片，可以使用引用本地图片方式，文件中已注明。
 2. 在`/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`)：

![参考](https://imgs.bwmelon.com/20190703230133.png)

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

如需修改样式滑动效果，可以参考[Swiper中文网](https://www.swiper.com.cn/api/index.html)文档。

## 演示
**PC端：**
可以使用拖动图片或者滑动滚轮选择样式
![PC端](https://imgs.bwmelon.com/20190703222357.gif)

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

![移动端](https://imgs.bwmelon.com/20190703222427.gif)

## 感激

* [收款啦](https://qr.52ecy.cn/) 
* [优启梦收款码](https://qrpay.uomg.com/)
* [Layui](https://www.layui.com/)

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

最后修改：2019 年 09 月 22 日 09 : 18 PM

如果觉得我的文章对你有用，请随意赞赏

62 条评论

小天
February 13th, 2021 at 03:46 pm

二维码太过密了，博主的短链接返回有问题，博主知道咋解决吗OωO

回复
1. BWmelon
  February 13th, 2021 at 04:20 pm
  
  @小天
  
  返回有什么问题，加qq反馈下
  
  回复
  1. 小天
    February 13th, 2021 at 04:21 pm
    
    @BWmelon
    
    我加了，一直没通过 QQ1969892205是不是我QQ被屏蔽了|´・ω・)ノ
    
    回复
    
    BWmelon
    February 13th, 2021 at 04:53 pm
    
    @小天
    
    找到了，被自动过滤了
    
    回复
Dyson
January 27th, 2021 at 07:24 pm

大佬。接口设置有个问题。
接口请求传参后面的“&”号怎么改
比如短网址接口：http://wiki.laogege.top/api.php?url=
长链接：https://qr.no0a.cn/allqr.html?qqUrl=&wechatUrl=wxp%3A%2F%2Ff2f0De2xvDsvn1aJUIWhZF4S-ePh19mxSW0x&aliUrl=&qq=&recname=
如过按照这样传参的话http://wiki.laogege.top/api.php?url=https://qr.no0a.cn/allqr.html?qqUrl=&wechatUrl=wxp%3A%2F%2Ff2f0De2xvDsvn1aJUIWhZF4S-ePh19mxSW0x&aliUrl=&qq=&recname=
最后只能获得&号前面这一小段的网址。
{
"longurl": "https:\/\/qr.no0a.cn\/allqr.html?qqUrl=",
"shorturl": "http:\/\/wiki.laogege.top\/fF1bz",
"stats": "http:\/\/wiki.laogege.top\/stats.php?id=fF1bz"
}

回复
1. BWmelon
  January 28th, 2021 at 02:30 pm
  
  @Dyson
  
  &问题需要先进行编码，可以看下index.js中的urlEncode方法
  
  回复
2. BWmelon
  January 28th, 2021 at 02:26 pm
  
  @Dyson
  
  这个我忘记说了，把他的短网址系统links表中的URL字段长度改成800就够用了，默认的255长度不够
  
  回复
batianri007
January 19th, 2021 at 11:44 am

大佬，可以的话，可以我加你qq.指导一下。635671233

回复
路羽
November 8th, 2020 at 09:16 pm

你好博主搞了半天了来这求救下更换了接口，但一直提示此商户未启用XX收款

回复
1. BWmelon
  November 9th, 2020 at 09:04 am
  
  @路羽
  
  加qq群然后发一下你的地址
  
  回复
文静
August 15th, 2020 at 07:53 pm

请问大佬，接口在哪个文件夹里替换呢？

回复
1. BWmelon
  September 1st, 2020 at 10:36 pm
  
  @文静
  
  可以在long2tiny.php里面更换接口
  
  回复
小仟
July 28th, 2020 at 06:36 pm

大佬生成后的二维码扫着 qq 扫出来空的 vx一扫就卡死支付宝识别不出来

回复
1. BWmelon
  August 4th, 2020 at 03:46 pm
  
  @小仟
  
  网址发一下
  
  回复
xdd
July 23rd, 2020 at 11:39 pm

博主，二维码生成失败咋办啊

回复
1. BWmelon
  August 4th, 2020 at 03:47 pm
  
  @xdd
  
  短网址接口失效了，请自行更换api
  
  回复
  1. xdd
    August 4th, 2020 at 10:45 pm
    
    @BWmelon
    
    博主，我用的是你的网站，但是他生成的时候就显示“收款码生成失败，请联系网站管理员”
    
    回复
xdd
July 5th, 2020 at 09:27 pm

博主，网站用不了了，咋整啊

回复
昊天
May 13th, 2020 at 07:53 pm

博主，二维码2个接口都不行了，有没有新接口OωO

回复
1. BWmelon
  May 20th, 2020 at 11:05 pm
  
  @昊天
  
  http://www.f4cklangzi.cn/ 这个网站可以，抓接口可直接用，没有加密
  
  回复
2. BWmelon
  May 20th, 2020 at 10:51 pm
  
  @昊天
  
  这个的话自己找找吧，urlcn和tcn的比较好，现在很多都收费了，其他的短网址一些可能用多了就会向你收费，实在不行自己搭建一个短网址也行
  
  回复
  1. 道非
    May 28th, 2020 at 10:52 pm
    
    @BWmelon
    
    自己怎么搭有没有源码
    
    回复
    
    BWmelon
    June 3rd, 2020 at 03:50 pm
    
    @道非
    
    GitHub上面有很多
    
    回复
1
April 27th, 2020 at 04:06 pm

失效了能更新下吗

回复
1. BWmelon
  April 30th, 2020 at 07:24 pm
  
  @1
  
  sojson腾讯短网址失效了，可以换成新浪的
  
  回复
alien
April 4th, 2020 at 10:13 am

点击立即生成后没有反应啊，弹出生成中...然后就没有然后了

回复
alienew
April 4th, 2020 at 10:00 am

该评论仅登录用户及评论双方可见

回复
滑稽大叔
March 4th, 2020 at 07:37 pm

大佬我部署完以后点上传没反应是什么情况

回复
1. BWmelon
  March 4th, 2020 at 08:42 pm
  
  @滑稽大叔
  
  打开控制台看一下有没有报错
  
  回复
拾一
February 19th, 2020 at 03:04 am

源码已经完全不能使用了哦，换了短链接和生成二维码的api还是不能使用~不知道是原因生成扫码提示优1乱码

回复
1. BWmelon
  February 19th, 2020 at 11:47 am
  
  @拾一
  
  已更换短网址api，替换long2tiny.php文件即可
  
  回复
  1. 遇见倪
    February 21st, 2020 at 10:20 am
    
    @BWmelon
    
    我替换了怎么还是不行
    
    回复
    
    BWmelon
    February 21st, 2020 at 11:03 am
    
    @遇见倪
    
    qq发一下网址给我
    
    回复
    
    遇见倪
    February 21st, 2020 at 04:51 pm
    
    @BWmelon
    
    你QQ多少
    
    回复
博客之家
January 2nd, 2020 at 09:31 pm

给博主推荐多接口短网址API备用
https://eps.gs/1IFBwTw

回复
清欢盏
December 11th, 2019 at 06:08 pm

感谢大佬的分享

回复
半成熟
December 6th, 2019 at 06:18 pm

Qq二维码提示解析失败怎么修复啊⌇●﹏●⌇

回复
1. BWmelon
  December 7th, 2019 at 05:45 pm
  
  @半成熟
  
  程序使用的是本地解码，有两个解码库，有些码其中一个能解，另一个不能解，尽量今晚将两个库合起来解码，提高解码成功率
  
  回复
陌伤
December 4th, 2019 at 10:08 am

有个想法，如果域名红了那岂不是就凉了
是不是可以考虑加防洪和屏蔽右上角的三点呢

回复
1. BWmelon
  December 7th, 2019 at 05:42 pm
  
  @陌伤
  
  之前有人提过，感觉不能从根本上解决问题
  
  回复
  1. 陌伤
    December 7th, 2019 at 08:41 pm
    
    @BWmelon
    
    该评论仅登录用户及评论双方可见
    
    回复
    
    BWmelon
    December 9th, 2019 at 09:32 pm
    
    @陌伤
    
    你加一下吧我对这方面不太了解
    
    回复
    
    陌伤
    December 10th, 2019 at 01:36 am
    
    @BWmelon
    
    防洪大致弄出来了，我又飘了，想要api接口了，想对接软件用
    
    回复
自由
October 17th, 2019 at 12:17 pm

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

回复
1. BWmelon
  October 20th, 2019 at 04:13 pm
  
  @自由
  
  清除一下浏览器缓存试试
  
  回复
95Cloud
September 21st, 2019 at 08:02 am

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

回复
1. BWmelon
  September 21st, 2019 at 10:22 am
  
  @95Cloud
  
  点一下网站右上角的“有问题找我”，然后把收款码发到群里看看
  
  回复
十七
September 16th, 2019 at 07:48 pm

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

回复
1. BWmelon
  September 16th, 2019 at 09:17 pm
  
  @十七
  
  二维码里面
  
  回复
Wrysmile
August 17th, 2019 at 03:41 pm

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

回复
1. BWmelon
  August 17th, 2019 at 08:26 pm
  
  @Wrysmile
  
  没有，信息都保存在生成的二维码中
  
  回复
啊啊啊
August 10th, 2019 at 12:37 am

下载地址呢

回复
1. BWmelon
  August 10th, 2019 at 10:46 am
  
  @啊啊啊
  
  https://github.com/BWmelon/qrcode/archive/master.zip
  
  回复
喻城
July 12th, 2019 at 07:55 pm

支持大佬

回复
稻草人
May 18th, 2019 at 10:05 pm

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

回复
1. BWmelon
  May 21st, 2019 at 09:55 pm
  
  @稻草人
  
  弹窗二维码是张图片，可以去二维码美化网站生成，然后上传到服务器引入
  
  回复
Adun
April 28th, 2019 at 04:24 pm

你好，请问支持支付后的接口回调吗？

回复
1. BWmelon
  May 2nd, 2019 at 11:08 am
  
  @Adun
  
  没有回调
  
  回复
刘忙
April 19th, 2019 at 10:29 pm

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

回复
1. BWmelon
  April 24th, 2019 at 09:43 am
  
  @刘忙
  
  可以，更改一下弹窗信息
  
  回复
宋生
February 15th, 2019 at 05:00 pm

云闪付目前挺火的，有这一块的资源吗？

回复
1. BWmelon
  February 20th, 2019 at 02:23 pm
  
  @宋生
  
  没了解过
  
  回复