JS二維碼生成外掛—QRCode
阿新 • • 發佈：2019-02-19
一、 簡介
QRCode是一個用於生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標籤,再通過 HTML5Canvas 繪製而成,不依賴任何庫。但是在使用過程中配合jQuery一起使用的話編碼更加簡便一些
二、 使用介紹
a) 所需檔案（jquery.qrcode.min.js）
連結：https://pan.baidu.com/s/1bqh6r87 密碼：325p
b) 建立步驟
i. 匯入js檔案
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>
ii. 建立div進行顯示
<div id="code"></div>iii. 使用js程式碼生成二維碼並在div中顯示
<script type="text/javascript">
$("#code").qrcode({
width: 400, //寬度
height:400, //高度
text: "www.zhizuobiao.com" //任意內容
});
</script>三、 注意事項
a) 如果二維碼中需要顯示的內容是字串中文的話需要先轉換成UTF-8編碼格式
四、案例例項
例項下載地址：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>二維碼生成測試頁面</title> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <script type="text/javascript" src="js/jquery.qrcode.min.js" ></script> </head> <body> <div id="code"></div> <script type="text/javascript"> $("#code").qrcode({ width: 400, //寬度 height:400, //高度 text: "www.zhizuobiao.com" //任意內容 }); </script> </body> </html>
連結：https://pan.baidu.com/s/1htE6f1i 密碼：cfch
結束語
本文主要是對QRCode 進行簡單介紹並且對外掛的使用進行了簡單的例項介紹。如果各位在使用過程中遇到什麼問題可以使用微信掃面下面的二維碼進行留言提問