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新浪短网址将长网址缩短,这样生成的二维码就会简单一点。
使用
- 下载源码,上传到自己的服务器或虚拟主机。
- 打开index.html,选择引用图片的方式,默认为引用淘宝图片,速度快。如果不想使用淘宝图片,可以使用引用本地图片方式,文件中已注明。
- 在
/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端:
可以使用拖动图片或者滑动滚轮选择样式
移动端:
仅可拖动图片选择样式
感激
部分样式来源于芝麻收款和第九工场,如有侵权,请联系删除。
111 条评论
你的文章内容非常用心,让人感动。 https://www.4006400989.com/qyvideo/68452.html
你的文章充满了智慧,让人敬佩。 http://www.55baobei.com/FdpZy3ql9D.html
《你的样子》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/43015.html
你的文章充满了智慧,让人敬佩。 http://www.55baobei.com/J53OQzWwGd.html
你的文章让我感受到了无尽的欢乐,谢谢分享。 http://www.55baobei.com/smfaJnHyC6.html
《拥挤的房间》欧美剧高清在线免费观看:https://www.jgz518.com/xingkong/36489.html
《古惑仔 江湖新秩序(导演特别剪辑版 )》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/146203.html
你的才华让人瞩目,期待你的更多文章。 http://www.55baobei.com/HL3jf9Rk1Y.html
《走山人奇谈》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/137270.html
看到你的文章,我仿佛感受到了生活中的美好。 https://www.4006400989.com/qyvideo/75962.html
你的文章内容非常精彩,让人回味无穷。 http://www.55baobei.com/vMsXFcLMDA.html
《回首又见他》日本剧高清在线免费观看:https://www.jgz518.com/xingkong/58375.html
《失踪人口》国产剧高清在线免费观看:https://www.jgz518.com/xingkong/42617.html
你的文章充满了欢乐,让人忍不住一笑。 https://www.yonboz.com/video/9603.html
你的文章让我心情愉悦,真是太棒了!http://www.plasticsealfactory.com
你的才华让人惊叹,你是我的榜样。http://www.sdgglaser.com
你的文章让我学到了很多知识,非常感谢。http://www.dllzzs.com
你的文章总是能给我带来欢乐,谢谢你!http://www.sdbzjyyzl.com
兄弟写的非常好 https://www.cscnn.com/
看的我热血沸腾啊https://www.ea55.com/
不错不错,我喜欢看
叼茂SEO.bfbikes.com
现在有一个问题,我不想让他合成,我只想让微信或者支付宝APP里生成的码点击上传后把多余的背景自动裁剪只保留二维码生成到咱们的模板里,这样能实现吗。
二维码本质内容是文本,如果只需要将微信或支付宝的码生成在模板上,可以将微信/支付宝解码后的值直接赋值给生成变量
llqrcode(´இ皿இ`)本地两个解码库具体是哪两个库呢,老大
记不清了,几年前从GitHub找的,忘记star了
今天是2023.1.6 合成的时候提示 收款码生成失败,请联系网站管理员 请问 还能用吗
自己搭建的话现在需要配置短网址接口,可以使用其他平台的或者自己搭建短网址平台
已经配置好了 能生成了
配置短网址接口?怎么操作
站长,短网址接口是不是失效了,生成出来的二维码还是很密集,扫不出来
短网址接口需要自己配置,如果没有配置或失效,生成出来的就是原链接,会很密集
大佬!这样的短网址接口怎么替换?https://pic.rmb.bdstatic.com/bjh/ba0bb4b2d55e5484a284af3c4e2803f3.png
dwz_url换成需要缩短的网址,然后取返回值
大佬,这个短链的程序有源码吗,我看了你推荐的GitHub的源码好像是被封了,能再发一份不.
加交流群,上传了一份到群文件
大佬,我在你这边生成的二维码为什么扫不了呢?
我已经申请加群了,希望大佬看到之后能通过一下啊
已通过,你的账号被腾讯自动过滤了,没有加群申请提示
好的,感谢,已经看到了
不能用啊不能用,大佬你服务的收款程序打包一份呗φ( ̄∇ ̄o)
遇到什么问题了,github上面代码是最新的,短网址需要自己调用或者搭建
短网址那个搞不明白,网上找的端网址api替换进去也不行
生成成功,二维码链接不正常,已搭配博主的短连接
那个短网址接口已经不能用了,建议自己搭建一个并注意url编码
使用不了
这个真的太棒了,希望博主能出一个去掉短网址生成接口,去掉二维码美化。链接太长不缩短美化后严重变形完全看不清扫不出。
还是建议使用短网址,除非把qq收款码去掉
二维码太过密了,博主的短链接返回有问题,博主知道咋解决吗OωO
返回有什么问题,加qq反馈下
我加了,一直没通过 QQ1969892205是不是我QQ被屏蔽了|´・ω・)ノ
找到了,被自动过滤了
大佬。接口设置有个问题。
接口请求传参后面的“&”号怎么改
比如短网址接口: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"
}
&问题需要先进行编码,可以看下index.js中的urlEncode方法
这个我忘记说了,把他的短网址系统links表中的URL字段长度改成800就够用了,默认的255长度不够
大佬,可以的话,可以我加你qq.指导一下。635671233
你好博主 搞了半天了 来这求救下 更换了接口,但一直提示此商户未启用XX收款
加qq群然后发一下你的地址
请问大佬,接口在哪个文件夹里替换呢?
可以在long2tiny.php里面更换接口
大佬 生成后的二维码扫着 qq 扫出来空的 vx一扫就卡死 支付宝识别不出来
网址发一下
博主,二维码生成失败咋办啊
短网址接口失效了,请自行更换api
博主,我用的是你的网站,但是他生成的时候就显示“收款码生成失败,请联系网站管理员”
博主,网站用不了了,咋整啊
博主,二维码2个接口都不行了,有没有新接口OωO
http://www.f4cklangzi.cn/ 这个网站可以,抓接口可直接用,没有加密
这个的话自己找找吧,urlcn和tcn的比较好,现在很多都收费了,其他的短网址一些可能用多了就会向你收费,实在不行自己搭建一个短网址也行
自己怎么搭有没有源码
GitHub上面有很多
失效了 能更新下吗
sojson腾讯短网址失效了,可以换成新浪的
点击立即生成后没有反应啊,弹出生成中...然后就没有然后了
大佬我部署完以后点上传没反应是什么情况
打开控制台看一下有没有报错
源码已经完全不能使用了哦,换了短链接和生成二维码的api还是不能使用~不知道是原因 生成扫码提示 优1乱码
已更换短网址api,替换long2tiny.php文件即可
我替换了怎么还是不行
qq发一下网址给我
你QQ多少
给博主推荐多接口短网址API备用
https://eps.gs/1IFBwTw
感谢大佬的分享
Qq二维码提示解析失败怎么修复啊⌇●﹏●⌇
程序使用的是本地解码,有两个解码库,有些码其中一个能解,另一个不能解,尽量今晚将两个库合起来解码,提高解码成功率
有个想法,如果域名红了那岂不是就凉了
是不是可以考虑加防洪和屏蔽右上角的三点呢
之前有人提过,感觉不能从根本上解决问题
你加一下吧 我对这方面不太了解
防洪大致弄出来了,我又飘了,想要api接口了 ,想对接 软件用
大佬大佬,支付宝扫码领红包弹窗怎么去掉呢?/js/index.js里的代码删掉了
清除一下浏览器缓存试试
那个上传支付宝收款码时候显示解析失败 重新上传也是
点一下网站右上角的“有问题找我”,然后把收款码发到群里看看
请问一下这个数据保存在什么地方?
二维码里面
你好,这个安全吗?会不会留有信息留存之类的
没有,信息都保存在生成的二维码中
下载地址呢
https://github.com/BWmelon/qrcode/archive/master.zip
支持大佬
感谢分享,东西很不错,请问怎么更改弹窗的二维码?
弹窗二维码是张图片,可以去二维码美化网站生成,然后上传到服务器引入
你好,请问支持支付后的接口回调吗?
没有回调
你好!可以拿走用吗!需要注意什么
可以,更改一下弹窗信息
云闪付目前挺火的,有这一块的资源吗?
没了解过