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
函数生成二维码。
总结
存储数据、宽、高三个参数必须进行传递。