上一篇写到调用微信扫一扫接口，现在来生成二维码、条形码。
在我们的系统中，使用订单号生成二维码、条形码，司机在公众号内扫描该二维码、条形码之后显示订单号，以供确认该订单是否可以签收。
一、jquery.qrcode.min.js 生成二维码
1、使用步骤
（1）引入文件：
<script src="jquery-2.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
（2）在页面放一个二维码容器：
<body onLoad="init()"> <div id="qrcode"></div> </body>
（3）使用 qrcode 方法生成二维码：
function generateQRCode(rendermethod, picwidth, picheight, url) { $("#qrcode").qrcode({ render: rendermethod, // 渲染方式有table方式和canvas方式 width: picwidth, //宽度 height:picheight, //高度 text: utf16to8(url), //内容 typeNumber:-1,//计算模式 correctLevel:2,//二维码纠错级别 background:"#ffffff",//背景颜色 foreground:"#000000" //二维码颜色 }); } function init() { generateQRCode("table",200, 200, "test"); }
qrcode 方法中 render 参数表示渲染方式，有 table 方式和 canvas 方式， canvas 方式如下：
$(function(){ var qrcode = $('#qrcode').qrcode({ render: "canvas", width: 120, height: 120, text: "SYDO1806090725140426" }).hide(); //将生成的二维码转换成图片格式 var canvas = qrcode.find('canvas').get(0); $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg')); });
其中将二维码转成图片形式，是方便转发，也可以不用，不用的话，qrcode 方法之后就不用用 hide() 方法了。
canvas 方式生成的二维码如下，利用之前上一篇的扫一扫，可以扫出生成二维码时候的参数（即 qrcode 方法里的 text 参数）：
2、中文编码问题
jquery-qrcode 是采用 charCodeAt() 方式进行编码转换的。而这个方法默认会获取它的Unicode编码，所以如果 text 参数带有中文，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。
可以通过下面函数来转换中文字符串 ：
//中文编码格式转换 function utf16to8(str) { var out, i, len, c; out = ""; len = str.length; for (i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c > 0x0001 || c == 0x0001) && (c < 0x007F || c == 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; }
3、generateQRCode 函数优化
将2说的中文问题加进 generateQRCode 函数：
function generateQRCode(rendermethod, picwidth, picheight, url) { $("#qrcode").qrcode({ render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式 width: picwidth, //宽度 height:picheight, //高度 text: utf16to8(url), //内容 typeNumber:-1,//计算模式 correctLevel:2,//二维码纠错级别 background:"#ffffff",//背景颜色 foreground:"#000000" //二维码颜色 }); }
二、jquery-barcode生成条形码
直接贴例子：
<html> <head> <meta charset="UTF-8"> <title>生成条形码</title> <script type="text/javascript" src="jquery-2.1.0.js"></script> <script type="text/javascript" src="jquery-barcode.js"></script> <script type="text/javascript"> $(function(){ $("#bcTarget").barcode("123456789", "codabar",{barWidth:2, barHeight:30}); $("#bcTarget2").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30}); // SYDO180609 $("#genid").click(function(){ var code = $("#orgcode").val(); $("#mycode").barcode(code, "code93",{barWidth:2, barHeight:30}); // SYDO480408 // $("#mycode").barcode(code, "code128",{barWidth:2, barHeight:30}); // SYDO431808 }); }); </script> </head> <body> 1、条形码 codabar <br><br> <div id="bcTarget"></div><br> 2、条形码 ean13 <br><br> <div id="bcTarget2"></div><br> 3、输入要生成条形码的数字(code93/code128): <input type="text" id ="orgcode"> <input type="button" value="生成条形码" id="genid"/><br><br> <div id="mycode"></div> </body> </html>
