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 相关文章推荐
js获取多个tagname的节点数组
Sep 22 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
详细讲解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函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP 转义使用详解
2013/07/15 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
网页常用特效代码整理
2006/06/23 Javascript
accesskey 提交
2006/06/26 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
python如何在循环引用中管理内存
2018/03/20 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python 求数组局部最大值的实例
2019/11/26 Python
如何基于Python实现数字类型转换
2020/02/07 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
音乐教学反思
2014/02/02 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
2014财务年终工作总结
2014/12/08 职场文书
优秀党员推荐材料
2014/12/18 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python