Mit der Entwicklung des mobilen Internets werden QR-Codes immer häufiger verwendet. Durch das Scannen können Sie Websites durchsuchen, Freunde hinzufügen usw. Das ist wirklich viel bequemer als die manuelle Eingabe.
Wir haben in der Anfangsphase ein umfassendes Bewertungssystem erstellt, da es für Benutzer umständlich ist, eine lange Liste von IP-Adressen einzugeben. Mithilfe von QR-Codes können Benutzer das System direkt eingeben ihre Mobiltelefone hochlegen und scannen.
Basierend auf diesem Anwendungsszenario habe ich online recherchiert, wie man Website-QR-Codes implementiert. Zusammenfassend gibt es zwei Arten:
1. Verwenden Sie einige QR-Code-erzeugende Websites oder QR-Code-Generatoren, um QR-Code-Bilder zu generieren, und hängen Sie sie dann auf der Website auf, z. B. den Online-Generator Code Cloud QR-Code (QR-Code)
Vorteile: Die Entwicklungskosten betragen null, vielfältige QR-Codes können schnell realisiert werden;
Nachteile: Das Ändern und Pflegen des QR-Codes ist etwas mühsam2. Verwenden Sie Java- oder .net-Code im Backend, um QR-Code-Bilder zu generieren, und verweisen Sie dann auf die Bilder auf der Website, z. B. qrcode, zxing usw.
Vorteile: Hochgradig anpassbare, schnelle Batch-Generierung
Nachteile: schwere Implementierung, höhere Entwicklungskosten für einfache Anwendungen
3. Generieren Sie sofort einen QR-Code (ˇ?ˇ) auf der Front-End-Seite über JavaScript oder andere Methoden, wie z. B. jquery-qrcode
Vorteile: Leichte Implementierung, Reduzierung der Bild-IO, Einsparung von Datenverkehr
Nachteile: Nicht für die Generierung komplexer QR-Codes geeignet
Natürlich sind diese drei Implementierungsmethoden in tatsächlichen Anwendungen nicht vollständig isoliert. Wir können Anwendungen auch entsprechend der tatsächlichen Projektsituation kombinieren, um die Effizienz zu maximieren und Kosten zu sparen.
Nachts hatte ich nicht viel Zeit, also habe ich mich zum Lernen für jquery-qrcode entschieden.
jquery-qrcode
Es wird auf Github gehostet:
https://github.com/jeromeetienne/jquery-qrcode
jquery-qrcode enthält hauptsächlich zwei Dateien:1. qrcode.js: QR-Code-Algorithmus-Implementierungsklasse
2. jquery.qrcode.js: Verwenden Sie jquery, um qrcode.js zu kapseln, und implementieren Sie Canvas- und Tabellen-Rendering, um QR-Codes gemäß Benutzerparametern zu generieren
Nach der Komprimierung gibt es nur noch eine Datei jquery.qrcode.min.js.
Code-Implementierung
Zur Vereinfachung der zukünftigen Verwendung werde ich den Code jedoch basierend auf den Erfahrungen aller im Internet neu organisieren.
jquery-qrcode.html-Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过jquery-qrcode生成二维码</title>
</head>
<body>
<!-- 引入百度CDN公共库的压缩版jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<!--引入压缩版jquery.qrcode.js -->
<script src="jquery.qrcode.min.js"></script>
<!--未压缩则需要引入两个文件jquery.qrcode.js和qrcode.js -->
<!--jquery.qrcode.js：jquery封装渲染类库 -->
<!--<script src="jquery.qrcode.js"></script>-->
<!--qrcode.js：二维码核心计算类库 -->
<!--<script src="qrcode.js"></script>-->
<script src="jquery.qrcode.min.js"></script>
<!--解决中文乱码问题，引入utf16t8.js -->
<script src="utf16to8.js"></script>
<div id="qrcodeCanvas"></div>
<div id="qrcodeTable"></div>
<script>
//最简用法，render默认是canvas
$('#qrcodeCanvas').qrcode("http://www.jb51.net/");
//完整用法，有默认值的均可省略
$('#qrcodeTable').qrcode({
text: utf16to8("脚本之家：http://www.jb51.net/"),//二维码包含的内容，默认只支持英文内容,中文会乱码，通过utf16to8转码可支持中文
render: "table",//渲染方式可选择canvas或table，默认是canvas，canvas方式还支持右键图片下载
width: 256,//宽度，默认是256
height: 256,//高度，默认是256，建议宽度和高度保持一致，否则不容易被识别
typeNumber: -1,//计算模式，默认是-1
//correctLevel: QRErrorCorrectLevel.H,//纠错等级，默认是QRErrorCorrectLevel.H，但是加上correctLevel这一行后无法渲染出二维码
background: "#ffffff",//背景颜色，默认是白色
foreground: "#000000"//前景颜色，默认是黑色
});
</script>
<body>
</html>
Laut der Erklärung von Internetnutzern mit guten Absichten:
Dies hängt mit dem js-Mechanismus zusammen. Die jquery-qrcode-Bibliothek verwendet charCodeAt(), um die Codierungskonvertierung durchzuführen,
Diese Methode erhält standardmäßig ihre Unicode-Kodierung. Im Allgemeinen verwenden Decoder UTF-8, ISO-8859-1 usw.,
Wenn es sich um Chinesisch handelt, wird Unicode im Allgemeinen in UTF-16 mit einer Länge von 2 Ziffern implementiert, während die UTF-8-Kodierung 3 Ziffern umfasst, sodass die Kodierung und Dekodierung des QR-Codes erfolgt nicht übereinstimmen.
Die Lösung besteht natürlich darin, die Zeichenfolge vor der Codierung des QR-Codes in UTF-8 zu konvertieren
Damit wir dieses Problem mit Hilfe von utf16to8.js lösen können, lautet der spezifische Code wie folgt:
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 <= 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;
}
