基於jquery二維碼生成外掛qrcode

NO IMAGE

本文將介紹一款基於jquery的二維碼生成外掛qrcode,在頁面中呼叫該外掛就能生成對應的二維碼。

 1、首先在頁面中加入jquery庫檔案和qrcode外掛。


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2、在頁面佈局中新增一個div


<div class="modal-body" id="qrCode" style="left:40px">
</div>

3、呼叫qrcode外掛。


var str = "http://"   location.host   "/ActivityDetail.html?id="   row.ActivityGuid   "&isMail="   row.isMail   "";
$("#qrCode").empty();
$('#qrCode').qrcode(str);
//$('#qrCode').qrcode("//www.jb51.net");//任意字串

4、我們試驗的時候發現不能識別中文內容的二維碼,通過查詢多方資料瞭解到,jquery-qrcode是採用charCodeAt()方式進行編碼轉換的。而這個方法預設會獲取它的Unicode編碼,如果有中文內容,在生成二維碼前就要把字串轉換成UTF-8,然後再生成二維碼。您可以通過以下函式來轉換中文字串:


function toUtf8(str) {  
var out, i, len, c;  
out = "";  
len = str.length;  
for(i = 0; i < len; i  ) {  
c = str.charCodeAt(i);  
if ((c >= 0x0001) && (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;  
}

可以把這個方法直接寫入到引用的外掛裡面,後面直接呼叫即可。如下:


var str = toUtf8("2017雞年大吉!");
$('#qrCode').qrcode(str);

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

javaScript生成支援中文帶logo的二維碼(jquery.qrcode.js)使用jquery.qrcode.js生成二維碼外掛使用jQuery.Qrcode外掛在客戶端動態生成二維碼並新增自定義LogojQuery qrcode生成二維碼的方法使用jquery.qrcode.min.js實現中文轉化二維碼使用jquery外掛qrcode生成二維碼jquery外掛qrcode線上生成二維碼使用jquery元件qrcode生成二維碼及應用指南使用jquery.qrcode生成彩色二維碼例項利用jquery.qrcode在頁面上生成二維碼且支援中文