上一篇寫到調用微信掃一掃接口，現在來生成二維碼、條形碼。
在我們的系統中，使用訂單號生成二維碼、條形碼，司機在公眾號內掃描該二維碼、條形碼之后顯示訂單號，以供確認該訂單是否可以簽收。
一、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>
同樣可以用上一篇的掃一掃，掃出生成條形碼時候的參數。