登录 注册 VIP特权 提交收录
Search Engine Optimization,不撸代码不修BUG

域名出售:ioee.cn(爱),联系QQ:49613651
应广大客户要求,本站价格上调,别问为什么,没理由~!

主页 » 网站源码 » 正文

qq微信支付宝三合一收款码在线生成、艺术创意二维码

1111.png

前言

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

原理

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

生成页面 这个就是网站主页面,有两个功能,一个是上传qq、微信、支付宝收款码并将它们解析成链接,还有一个是将这几个链接合起来,然后生成合并之后的二维码。解析和生成都是用了jQueryqrcode插件,为了美观,用canvas绘制收款码的样式。jQueryqrcode插件,为了美观,用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",其他子节点参考下表:

1111.png

这样就成功添加了一个新的样式,新增的json内容内容大致为下图所示(图片中写错了,应该是new而不是new.png):

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

如需修改样式滑动效果,可以参考Swiper中文网文档。

隐藏内容「评论」后可见,请勿回复无意义内容!


您的大名:
万水千山总是情,给个打赏行不行。 打赏

标签: 收款qq支付宝微信html
! 如链接失效请在下方留言。本站所发布的全部内容源于互联网搬运,仅限于小范围内传播学习和文献参考,请在下载后24小时内删除,如果有侵权之处请第一时间联系我们删除。敬请谅解! E-mail:49613651@qq.com
原创文章,作者:一宇A1xt,如若转载,请注明出处:http://www.a1xt.com/archives/80.html

相关推荐

微信群群员强制群代办设置教程

微信群强制群代办设置教程,不是管理员也可以设置群代办,让所有群强制点击小程序教程。不是管理员,也可以强制设置进去群代办,让所有群员强制...

鸽子Typecho主题鸽子Typecho主题

一款很二次元的主题模板特色二次元风格自适应评论可显示加密地址的qq头像咕咕咕?[hide] https://huanyin.lanzo...

Fantasy一款极简Typecho博客主题

Fantasy」移植自PCDotFan 的 Bitcron 主题 「Aragaki」特色模板素净优雅支持代码高亮评论支持显示qq头像拥...

[Windows] 微信多开;集成各大平台多账号登陆、签到、完成任务

软件功能:1.微信多开,免二次扫码(和论坛其他工具多开原理一样,可无视微信版本更新)2.其他平台多账号管理,软件可自由切换各个平台不同...

校园跑腿服务平台小程序【开源转载】

校园综合服务平台,小程序内含快递代取、打印服务、校园跑腿、代替服务、上门维修、其他帮助。自备:备案域名;服务器,小程序开通微信支付【如...

装逼生成器,微信公众号引流源码

源码简介:装逼生成器,微信公众号引流源码(类似于网上装X神器APP一样)这套源码可以对接微信公众号,给公众号引流也是个不错的选择源码的...

五合一收款码在线生成微信小程序版

五合一收款码在线生成微信小程序版,35个模板 支持微信支付、支付宝支付、手机QQ支付、京东钱包、百度钱包,五合一收款,将其二维码合并为...

五合一收款码在线生成源码

五合一收款码在线生成,40个模板 支持微信支付、支付宝支付、手机QQ支付、京东钱包、百度钱包,PayPal五合一收款,将其二维码合并为...


猜你喜欢

php超仿bilbili播放器带弹幕库后台管理系统

前言基本上是在边百度边看文档中度过的,因为刚学这个,很多东西也没接触过。把这个系统功能分析了一下,觉得这个全靠html+css+js可...


上一篇
下一篇

发表评论