原理
- 生成页面 这个就是网站主页面，有两个功能，一个是上传qq、微信、支付宝收款码并将它们解析成链接，还有一个是将这几个链接合起来，然后生成合并之后的二维码。解析和生成都是用了jQuery的qrcode插件，为了美观，用canvas绘制收款码的样式。
- 收款页面 当移动设备扫描了之前生成的收款码，这个页面被打开并会获取收款码中传入的三个参数（qq、微信、支付宝链接），然后根据浏览器UA判断当前是什么软件扫的二维码，qq和微信不能直接唤起支付，这时显示二维码界面供用户长按付款，支付宝可以直接进去转账页面。
使用
- 下载源码，上传到自己的服务器或虚拟主机。
- 打开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内容内容大致为下所示：
"longmao": {
"qrWidth": "464",
"qrHeight": "464",
"foreground": "#7394B6",
"background": "transparent",
"imgWidth": 900,
"imgHeight": 1200,
"font": "70px '黑体'",
"fontColor": "transparent",
"recNameLeft": "",
"recNameTop": 178,
"qrLeft": 218,
"qrTop": 214
}
3、小提示： 如果不想在背景中生成收款名，可以将fontColor属性设为transparent。
