最近在做微信开发，因为要使用到二维码，所以选择了jquery-qrcode插件。今天和小伙伴们一起分享一下。
1.下载资源
官方下载地址：https://larsjung.de/jquery-qrcode/
2.怎么使用
jquery-qrcode插件的使用方法，可以说是比较简单的。通过客户端生成二维码可以减少服务器端的压力，其次可以降低开发的人工成本。一举两得。示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>二维码创建测试页面</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-qrcode-0.14.0.js"></script>
<script language="JavaScript">
$(function(){
var options = {
render: "canvas",
ecLevel: 'H',//识别度
fill: '#000',//二维码颜色
background: '#ffffff',//背景颜色
quiet: 2,//边距
width: 200,//宽度
height: 200,
text: "http://www.baidu.com",//二维码内容
//中间logo start
mode: 4,
mSize: 20 * 0.01,
mPosX: 50 * 0.01,
mPosY: 50 * 0.01,
image:$('#img-buffer')[0],//logo图片
//中间logo end
label: 'jQuery.qrcode',
fontname: 'Ubuntu',
fontcolor: '#ff9818',
};
$('#container').empty().qrcode(options);
})
</script>
</head>
<body>
<div id="code"></div>
<div id="container">这里是二维码显示位置</div>
//缺省图片代码
</body>
</html>
<img id="img-buffer" src="1.jpg" hidden>，这段代码接在缺省图片代码的注释那边。
PS：是不是很简单呢？赶快尝试一下吧，亲爱的小伙伴！
网友评论