生成微信QQ支付宝三合一收款码

转载自 https://www.0353com.cn/74.html

EdNovas的DEMO站

https://qrcode.ednovas.xyz

大西瓜收款码三合一

https://qr.no0a.cn/

原理

剖析之后发现只需求两个页面。

生成页面

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

收款页面

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

这样的话这个网站就做好了，生成页面自创了收款啦和优启梦收款码，为了不太单调而且不把他们的功用生搬硬套的弄过来，想了一会就弄了个换色的功用(觉得没什么用，完整是凑内容的哈哈)，假如需求其他款式的话，能够去他们的网站生成。还有由于这三个收款码链接加起来特别长，生成的二维码比拟密集（也就是丑），然后就经过suo.im将长网址缩短，这样生成的二维码就会简单一点。

源码下载地址

最新版GitHub下载: https://github.com/BWmelon/qrcode

gitee：https://gitee.com/BWmelon/qrcode

(以下可能更新不及时)

下载地址：收款码在线生成系统源码无限制.rar

百度网盘：收款码在线生成系统源码无限制.rar

EdNovas的蓝奏云：https://ednovas.lanzoux.com/iVvrkmuy79c

添加自定义新样式

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