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 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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技巧与注意事项分析
2011/02/03 PHP
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Django模板Templates使用方法详解
2019/07/19 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
空指针到底是什么
2012/08/07 面试题
Java语言的优势
2015/01/10 面试题
八一慰问活动方案
2014/02/07 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS