1.插件介绍
jquery.qrcode.min.js插件是jq系列的基于jq，在引入该插件之前要先引入jq。能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。
闲话少说，看demo吧！（haha...）
2.快速使用demo
简单介绍：这是一款快速应用案例，没有太特殊的需求的话够用了。鉴于需求，本例是把二维码生成了图片，可以保存到手机，然后发送给好友，直接识别二维码。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>二维码分享xx</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css" />
8 <script src="jquery-1.8.3.min.js"></script>
9 <script src="jquery.mobile-1.4.5.min.js"></script>
10 <script src="jquery.qrcode.min.js"></script>
11 <style>
12 * {
13 font-family: "微软雅黑";
14 }
15 #wxshare {
16 font-weight: normal;
17 background: #3d85c6;
18 border-radius: 5px;
19 padding: 5px 7px;
20 color: #fff;
21 border: none;
22 }
23 .tc {
24 text-align: center;
25 }
26
27 .block {
28 display: block;
29 }
30 .green {
31 color: #2d7104;
32 }
33 #myPopup small {
34 padding: 8px;
35 border-bottom: 1px solid #ccc;
36 }
37 #qrcodeImg {
38 margin-top: 20px;
39 padding: 3px;
40 border: 1px solid #ccc;
41 }
42 </style>
43 </head>
44 <body>
45 <div data-role="page">
46 <div data-role="header" data-theme="b">
47 <h1>七月</h1>
48 </div>
49 <div data-role="main" class="ui-content">
50 <a id=‘wxshare‘ data-rel="popup" href="#myPopup" class="ui-btn ui-corner-all" data-transition="slidedown"><span>邀请好友</span></a>
51 <!--弹窗-->
52 <div data-role="popup" id="myPopup" data-position-to="window" class="ui-content">
53 <div class=‘tc‘>
54 <small class="green">长按一下二维码保存图片发送给好友</small>
55
56 <div id="code"></div>
57 <img src="" id="qrcodeImg"/><br>
58 </div>
59 </div>
60 </div>
61 </div>
62
63 <script>
64 $(function() {
65 $(‘#wxshare‘).tap(function() {
66 var qrcode = $(‘#code‘).qrcode({
67 render: "canvas", //也可以替换为table
68 width: 120,
69 height: 120,
70 text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/
71
72 }).hide();
73 //将生成的二维码转换成图片格式
74 var canvas = qrcode.find(‘canvas‘).get(0);
75 $(‘#qrcodeImg‘).attr(‘src‘, canvas.toDataURL(‘image/jpg‘));
76 });
77
78 });
79 </script>
80
81 </body>
82
83 </html>
demo运行效果简略如下：有兴趣可以自己尝试一下
3.用法分析
（1）将jquery.qrcode.min.js和jquery添加到您的网页中
1 <script src="jquery-1.8.3.min.js"></script> 2 <script type="text/javascript" src="jquery.qrcode.min.js"></script>
注意：2中demo引入jqueryMobile是为了样式和交互效果加的。基本引入这两个就可以使用了！ （2）然后要创建一个二维码的容器：
<div id="code"></div>
（3）加入js在容器中创建二维码：
<script>
$(function() {
$(‘#wxshare‘).tap(function() {
var qrcode = $(‘#code‘).qrcode({
render: "canvas", //也可以替换为table
width: 120,
height: 120,
text: "http://www.cnblogs.com/imelemon/p/6677956.html"/*可以通过ajax请求动态设置*/
}).hide();
//将生成的二维码转换成图片格式
var canvas = qrcode.find(‘canvas‘).get(0);
$(‘#qrcodeImg‘).attr(‘src‘, canvas.toDataURL(‘image/jpg‘));
});
});
</script>
4.进阶用法
（1）设置二维码大小
//生成100*100(宽度100，高度100)的二维码
jQuery(‘#qrcode‘).qrcode({
render : "canvas",//也可以替换为table
width : 100,//单位是像素
height : 100,
text : "http://www.cnblogs.com/imelemon/p/6677956.html"
});
（2）设置二维码颜色
//生成前景色为红色背景色为白色的二维码
jQuery(‘#qrcode‘).qrcode({
render : "canvas",//也可以替换为table
foreground: "#C00",
background: "#FFF",
text : "http://www.cnblogs.com/imelemon/p/6677956.html"
7 });
（3）设置二维码生成方式
//使用table/canvas生成
jQuery(‘#qrcode‘).qrcode({
render : "table",//使用canvas生成就设置为 canvas
text : "http://www.cnblogs.com/imelemon/p/6677956.html"
});
（3）将二维码转成图片格式：
->如2中demo
$(‘#wxshare‘).tap(function() {
var qrcode = $(‘#code‘).qrcode({
render: "canvas", //也可以替换为table
width: 120,
height: 120,
text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/
}).hide();
//将生成的二维码转换成图片格式
var canvas = qrcode.find(‘canvas‘).get(0);
$(‘#qrcodeImg‘).attr(‘src‘, canvas.toDataURL(‘image/jpg‘));
});
注意：二维码如果过长生成的二维码会有问题，建议直接url字符串不要过长150个字符以内；
参考：http://www.jq22.com/jquery-info294
时间： 2024-10-27 07:59:26