快速生成网页中的二维码。
步骤:
1. 引入Jquery.js文件
2. 引入jquery.qrcode.js文件
3. 引入支持中文的编码js文件 (utf.js)
4. 在网页中编写一个div 用于显示二维码
<div id="div1"></div>
5. 准备二维码的规格对象(JSON)
var config = {
width:数字,//值是number类型, 表示的单位是px 必须传递
height:数字,//值是number类型, 表示的单位是px 必须传递
text:"内容",//text就表示二维码中存储的数据 必须传递
correctLevel:数字,//取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0 可选参数
background:"#rrggbb",//默认白色, 表示二维码的后景颜色 可选参数
foreground:"#rrggbb",//默认黑色, 表示二维码的前景颜色 可选参数
render:"绘制模式"//取值:table/canvas , 默认table 可选参数
};
6. 通过选择器, 查找到上述的div ,得到Jquery对象, 通过jquery对象的qrcode函数生成二维码
$("#div1").qrcode(config);
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二维码生成</title>
<!--引入jquery、qrcode、utf等js文件-->
<script src="js/jquery2.1.4.js"></script>
<script src="js/jquery.qrcode.js"></script>
<script src="js/utf.js"></script>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>
<script>
var config={
width:200,
height:200,
text:"二维码已生成",
}
$("#qrcode").qrcode(config);
</script>
页面效果:
更多二维码生成技巧请参考: https://www.jq22.com/jquery-info13391