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 Timing
Apr 21 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
js 函数的副作用分析
Aug 23 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
js实现百度搜索提示框
Feb 05 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 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横向重复区域显示二法
2008/09/25 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php简单的上传类分享
2016/05/15 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
php use和include区别总结
2019/10/13 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
解析Python中while true的使用
2015/10/13 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
详解Python 函数参数的拆解
2020/09/02 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
文字自荐书范文
2014/02/10 职场文书
班组建设经验交流材料
2014/05/12 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
员工手册董事长致辞
2015/07/29 职场文书