一、簡介
二維碼又稱二維條碼，常見的二維碼為QR Code，QR全稱Quick Response，是一個近幾年來移動設備上超流行的一種編碼方式，它比傳統的Bar Code條形碼能存更多的信息，也能表示更多的數據類型。二維碼是信息的載體，通俗說就像我們使用的U盤，能存儲一定量的信息在二維碼中。
二維條碼/二維碼（2-dimensional bar code）是用某種特定的幾何圖形按一定規律在平面（二維方向上）分布的黑白相間的圖形記錄數據符號信息的；在代碼編制上巧妙地利用構成計算機內部邏輯基礎的“0”、“1”比特流的概念，使用若干個與二進制相對應的幾何形體來表示文字數值信息，通過圖象輸入設備或光電掃描設備自動識讀以實現信息自動處理：它具有條碼技術的一些共性：每種碼制有其特定的字符集；每個字符占有一定的寬度；具有一定的校驗功能等。同時還具有對不同行的信息自動識別功能、及處理圖形旋轉變化點。
二、開始寫代碼
1、加載要使用的jquery插件（qrcode.min.js）
首先要使用到一個可以生成二維碼的jQuery插件
下載地址：https://git.coding.net/yangWansheng/QrCode.git
寫入html網頁
<script type="text/javascript" charset="utf-8" src="js/qrcode.js"></script>
2、代碼編寫
文件路徑
html前端網頁
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>生成二維碼</title> </head> <body> <textarea id="txtContent" cols="50" rows="5"></textarea> <button type="button" id="btngetQr">生成</button> <div id="divQr"></div> <script type="text/javascript" charset="utf-8" src="js/qrcode.js"></script> <script> var divQr = document.getElementById("divQr"); var Qr = new QRCode(divQr, { width: 128,//二維碼的寬度大小 height: 128,//二維碼的高度大小 colorDark: "#000000",//前景顏色 colorLight: "#ffffff",//背景顏色 correctLevel:QRCode.CorrectLevel.L //顯示二維碼的密度 }); var txtContent = document.getElementById("txtContent"); document.getElementById("btngetQr").addEventListener("click",function(){ Qr.makeCode(txtContent.value);//設置二維碼的內容 },false); </script> </body> </html>
網頁效果：
測試結果：
用手機掃描就能顯示你輸入的文字了，
當然也可放網址、圖片等等
如果你輸入的是網址掃描后直接進入你的網頁
我們還可以查看我們的幫助文檔
根據需求修改二維碼樣式。