自适应收款码大西瓜三合一生成系统源码

原理

  • 生成页面 这个就是网站主页面,有两个功能,一个是上传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。

修改样式滑动效果修改。

参考Swiper中文网文档

    下载权限

    查看
    • 免费下载
      评论后下载
      登录后下载

    • {{attr.name}}:
    您当前的等级为
    您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

    人已赞赏
    安全防护

    教你6招预防手机隐私信息泄露

    2018-7-11 22:59:33

    HTML 5

    微信QQ域名检测接口源码 纯官方接口 带API

    2020-4-28 10:54:04

    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索