h5开发app之在线生成二维码

h5通过jquery和qrcode在线生成二维码

首先我们需要下载一个qrcode.js文件，然后依次引入jquery和qrcode文件。

1、创建一个输入框以便做演示使用：

<input id="text" type="text" value="http://www.baidu.com" style="width:80%" />

2、创建一个div以用来放置二维码图片（div的id定义为“qrcode”）：

<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

3、插入js代码：

 var qrcode = new QRCode(document.getElementById("qrcode"), {
     width : 100,
     height : 100
 });

 function makeCode () {
     var elText = document.getElementById("text");

     if (!elText.value) {
         alert("Input a text");
         elText.focus();
         return;
     }

     qrcode.makeCode(elText.value);
 }

 makeCode();

 $("#text").
     on("blur", function () {
         makeCode();
     }).
     on("keydown", function (e) {
         if (e.keyCode == 13) {
             makeCode();
         }
     });
 </script

这样就可以，在线生成二维码了！

下图就是我们的代码效果图，试试用手机扫描下会不会跳转到百度首页。