二维码生成与解析：jQuery-qrcode

发表于 | 分类于 |

前面两篇博文讲述了使用Java在本地生成和解析二维码，其生成的二维码可以用到Web应用中，但是在Web应用中有一种更简单的生成方法就是使用jQuery-qrcode来生成二维码，本片博文就介绍使用这种方法来生成二维码。

准备工作

本次项目是一个Web项目，可以使用静态的HTML来生成，但是为了更贴近实际使用情况，我使用Java EE项目来演示（使用JSP技术），项目结构很简单，只有一个jsp文件和一个js文件夹，我们将jquery.min.js和jquery.qrcode.min.js两个文件放到项目的WebContent目录的js文件夹之下。

所说的两个js文件在网盘以下中给出：

百度网盘：链接：https://pan.baidu.com/s/1vQZRPbRKzaQg3-XqsRc-Jw
提取码：y8cq

创建项目

使用eclipse-javaee版本创建一个动态web项目，项目目录如图所示：
项目结构

经过测试之后发现一个问题就是在jQuery-qrcode自带的编码是utf16，无法正常的解析中文，所以需要使用JavaScript函数对其 进行转码，所以在文件中使用了一个utf16to8()的函数对中文进行编码，之后生成的二维码就能正常使用了。

给出jsp文件中的全部内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery生成二维码</title>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.qrcode.min.js"></script>


<script type="text/javascript">
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; 
}

</script>
</head>
<body>
<div align="center">
	生成的二维码如下<br><br>
	<div id="qrcode"></div>
	<script type="text/javascript">
//	jQuery('#qrcode').qrcode(utf16to8("但是人总得想办法,真的,要么忙着生存,要么赶着去死"));		
	jQuery('#qrcode').qrcode({width: 200,height: 200,text: utf16to8("心怀希望是一件好事,也许是最好的事,心怀希望就永远有希望")});
	</script>	
</div>

</body>
</html>

生成的二维码如下：

小结

网页的话一般没有解码的需求，所以老师也没有讲解jQuery解码的说明，所以网页项目只有生成二维码的过程。
二维码生成与解析的博文至此告一个段落，由于博主的基础水平所限，所以偏向实用的内容，如何生成和解析二维码是我这次学习的目标，至于二维码的原理等内容，可以去慕课网Fcming老师的讲解，本文的所有代码是本人亲手所写并测试的，代码中难免有不足和错误的地方。还有本文偏向Java的技术栈，如果你希望使用PHP生成二维码可以去看看PHP QRCode生成二维码这篇课程。
最后，再次感谢Fcming老师的讲解和慕课平台。