目前，扫一扫的应用广泛，越来越多的产品需要我们程序员展示二维码，下面介绍一下怎么生成链接的动态二维码。（总是想着怎么开始第一篇博客）
下载一个插件js （qrcode.js）
页面引入js
同时在页面上设置一个隐藏域，隐藏域的value放上二维码想展示的链接
这个链接如果很长的话需要先转成短地址，短地址的接口下篇文章再介绍。
需要在js文件中新增一个function，如下
functionmakeCode(){
varelText =document.getElementById("shareUrl");
if(!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
document.getElementById(“shareUrl”)，就是上面隐藏域的id。
页面上写一个div，用来展示二维码
插件会生成canvas和img两个标签，自动加到到qrcode中。
最后一步添加页面初始化生成二维码
varqrcode =newQRCode(document.getElementById("qrcode"), {
width:80,
height:80
});
makeCode();
$("#url").on("blur",function(){
makeCode();
}).on("keydown",function(e){
if(e.keyCode ==13) {
makeCode();
}
});
补充
我在使用过程中发现，部分安卓机二维码显示有问题特别小，并没有按照我们设置的css显示，经过不停地调试，我发现是安卓的环境下，生成的img标签display没有block出来，反而canvas标签block出来了。只要我们通过f12肯定会发现，正常的机子，都是img标签block，canvas标签是none。所以只要我们给canvas通过js动态的加上和img相同的class，或者相同的样式即可。具体代码如下，将原来的makeCode方法替换：
functionmakeCode(){
varelText =document.getElementById("shareUrl");
if(!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
$("#qrcode img").addClass("qrimg");
$("#qrcode canvas").addClass("qrimg");
}
qrimg的样式，可根据自己实际展示效果写：
.qrbox .qrimg {
color: #999;
font-size: 0.2rem;
width: 100%;
height: 100%;
position: absolute;
}
显示完美，所有机型都正常显示了，正当我们高兴的发布了，又有人发现，安卓机又出现问题了，简直就是开发的噩梦。。。
这次的问题是安卓机在微信环境下，没办法识别图中二维码，只能先截图，在识别图中的二维码，探索的过程不说了，最后是继续改造makeCode方法，见下：
functionmakeCode(){
varelText =document.getElementById("shareUrl");
if(!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
$("#qrcode img").addClass("qrimg");
$("#qrcode canvas").addClass("qrimg");
if(!$("#qrcode img").attr("src")){
$("#qrcode img").show();
$("#qrcode canvas").hide();
varcanvas = $("#qrcode canvas")[0];
vardataURL = canvas.toDataURL("image/png");
$("#qrcode img").attr("src",dataURL);
}
}
将canvas转成img格式的base64码，到现在，一切ok。