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 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
JavaScript如何借用构造函数继承
Nov 06 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常用函数 推荐收藏保存
2010/02/21 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
JavaScript日历实现代码
2010/09/12 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
vue强制刷新组件的方法示例
2019/02/28 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python中变量交换的例子
2014/08/25 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
大学生个人事迹材料
2014/01/21 职场文书
中学生运动会口号
2014/06/07 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
求职自我评价怎么写
2015/03/09 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python