1.插件介绍
jquery.qrcode.min.js插件是jq系列的基于jq，在引入该插件之前要先引入jq。能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。
闲话少说，看demo吧！（haha...）
2.快速使用demo
简单介绍：这是一款快速应用案例，没有太特殊的需求的话够用了。鉴于需求，本例是把二维码生成了图片，可以保存到手机，然后发送给好友，直接识别二维码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二维码分享xx</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
<style>
* {
font-family: "微软雅黑";
}
#wxshare {
font-weight: normal;
background: #3d85c6;
border-radius: 5px;
padding: 5px 7px;
color: #fff;
border: none;
}
.tc {
text-align: center;
} .block {
display: block;
}
.green {
color: #2d7104;
}
#myPopup small {
padding: 8px;
border-bottom: 1px solid #ccc;
}
#qrcodeImg {
margin-top: 20px;
padding: 3px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>七月</h1>
</div>
<div data-role="main" class="ui-content">
<a id='wxshare' data-rel="popup" href="#myPopup" class="ui-btn ui-corner-all" data-transition="slidedown"><span>邀请好友</span></a>
<!--弹窗-->
<div data-role="popup" id="myPopup" data-position-to="window" class="ui-content">
<div class='tc'>
<small class="green">长按一下二维码保存图片发送给好友</small> <div id="code"></div>
<img src="" id="qrcodeImg"/><br>
</div>
</div>
</div>
</div> <script>
$(function() {
$('#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'));
}); });
</script> </body> </html>
demo运行效果简略如下：有兴趣可以自己尝试一下
3.用法分析
（1）将jquery.qrcode.min.js和jquery添加到您的网页中
<script src="jquery-1.8.3.min.js"></script>
<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"
});
（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