Javascript生成带参数的二维码示例


Posted in Javascript onOctober 10, 2016

前言

在最近的项目中有个需求是要生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实,下面话不多说,直接上实现的过程。

引入js:

require.config({  baseUrl : "/",  paths: { jquery:'plugin/jquery/jquery-3.1.0.min', qrcode:'plugin/qrcode/qrcode'  } }); require(  [ 'jquery', 'qrcode'  ],   function($){ xxxx..  } )

待渲染的dom:

<div id="qrcodeCanvas"></div>

初始化二维码:

$('#qrcodeCanvas').qrcode({ text: "http://h5.sztoda.cn/base/login", background: "#CCC",//背景 foreground: "#FFF",//前景 width: 100,//宽 height: 100,//高 });

值得注意的是,“text”如果是链接且需要自动跳转,只需带上http://开头即可

效果图:

Javascript生成带参数的二维码示例

好了,以上就是利用Javascript生成带参数二维码的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
详细讲解JavaScript中的this绑定
Oct 10 #Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 #Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 #Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 #Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 #Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 #Javascript
js实现弹窗居中的简单实例
Oct 09 #Javascript
You might like
php 分库分表hash算法
2009/11/12 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
自学python的建议和周期预算
2019/01/30 Python
python assert的用处示例详解
2019/04/01 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
python中温度单位转换的实例方法
2020/12/27 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
电气专业应届生求职信
2013/11/01 职场文书
初中女生自我鉴定
2013/12/19 职场文书
生日邀请函范文
2014/01/13 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
房屋质量投诉书
2015/07/02 职场文书