JS二维码生成插件—QRCode

最新推荐文章于 2024-08-13 21:31:15 发布

置顶程序员大徐

最新推荐文章于 2024-08-13 21:31:15 发布

阅读量3.7k

点赞数 1

分类专栏： jquery web前端 QRCode 二维码

本文链接：https://blog.csdn.net/xuqiang930410/article/details/79021162

版权

web前端同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

QRCode

1 篇文章 0 订阅

订阅专栏

一、简介

QRCode是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5Canvas 绘制而成,不依赖任何库。但是在使用过程中配合jQuery一起使用的话编码更加简便一些

二、使用介绍

a) 所需文件（jquery.qrcode.min.js）

链接：https://pan.baidu.com/s/1bqh6r87 密码：325p

b) 创建步骤

i. 导入js文件

<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>

ii. 创建div进行显示

<div id="code"></div>

iii. 使用js代码生成二维码并在div中显示

<script type="text/javascript">
      $("#code").qrcode({
	  width: 400, //宽度 
    	  height:400, //高度 
    	  text: "www.zhizuobiao.com" //任意内容 
   });
</script>

三、注意事项

a) 如果二维码中需要显示的内容是字符串中文的话需要先转换成UTF-8编码格式

四、案例实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>二维码生成测试页面</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>
	</head>
	<body>
		<div id="code"></div>
		
		
		<script type="text/javascript">
			$("#code").qrcode({
				
   			    width: 400, //宽度 
    			    height:400, //高度 
    			    text: "www.zhizuobiao.com" //任意内容 
    			
			});
		</script>
	</body>
	
</html>

实例下载地址：

链接：https://pan.baidu.com/s/1htE6f1i 密码：cfch