2021-8-9 二维码生成

bug 记录

描述：

  在前端的编写中，很多时候我们需要用到二维码来传递相应的数据，使用 jQuery 的插件就能很好的构键一个二维码。

---

---

说明

一、解决

// 依赖导入
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/qrcode.min.js" type="text/javascript"></script>

// 二维码显示件
<div id="qrcode"></div></div>

<script type="text/javascript">
	$(function() {
		var qrcodeWH = $("#qrcode").width();
		// 填充二维码数据
		var setQRcode = function(textdata){
			var qrcode = new QRCode('qrcode', // id
			 {
			  text: textdata, // 存储数据
			  width: qrcodeWH, // 宽
			  height: qrcodeWH, // 高
			  colorDark : '#000000',
			  colorLight : '#ffffff',
			  correctLevel : QRCode.CorrectLevel.H
			});
		};

		setQRcode('取件码');
	});
</script>

二、分析

• 引入Jquery.js、jquery.qrcode.js、引入支持中文的编码 js 文件 ( utf.js 可以不引入)。
• 在网页中编写一个 div 用于显示二维码。
• 准备二维码的规格对象( JSON )。
• 通过选择器, 查找到上述的 div ,得到 Jquery 对象, 通过 jquery 对象的 qrcode 函数生成二维码。

---

总结

存储数据、宽、高三个参数必须进行传递。