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'));
});
5.遇坑及解決方法
遇到的問題：
1.生成了二維碼圖片，保存用微信識別的時候部分安卓機不去識別；
解決方法：
可能生成二維碼的url過長，可適當增大qrcode（）中二維碼的寬高；
注意：url如果過長生成的二維碼會有問題，建議直接url字符串不要過長150個字符以內；
另外一個二維碼demo下載地址 https://github.com/yingliyu/qrCode.git
參考：http://www.jq22.com/jquery-info294