程序员在旅途

用这生命中的每一秒，给自己一个不后悔的未来！

0%

MUI 结合 html5+ 实现移动端二维码扫描功能

置顶 | 发表于 更新于 分类于 Valine：
本文字数： 4.3k 阅读时长 ≈ 4 分钟

一、条形码的由来

　　条形码是由美国的N．T．Woodland在1949年首先提出的．近年来，随着计算机应用的不断普及，条形码的应用得到了很大的发展．条形码可以标出商品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等信息，因而在商品流通、图书管理、邮电管理、银行系统等许多领域都得到了广泛的应用。
　　二维条码/二维码（2-Dimensional Barcode）最早发明于日本，是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化等特点。 二维条码/二维码能够在横向和纵向两个方位同时表达信息，因此能在很小的面积内表达大量的信息。

二、HTML5+中的二维码模块

　　在HTML5+中，提供扫描识别功能的是Barcode模块，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。
　　更多的有关HTML5+模块使用介绍，可以打开HTML5中国产业联盟官网进行查看。

三、功能展示图

物品二维码扫描示意图

四、代码实现

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<style type="text/css">
			#bcid {
				width: 100%;
				height: 100%;
				position: absolute;
				background: #000000;
			}
			html,
			body,
			div {
				height: 100%;
				width: 100%;
			}
			.fbt {
				color: #0E76E1;
				width: 50%;
				background-color: #ffffff;
				float: left;
				line-height: 44px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #0E76E1;">物品二维码扫描</h1>
			<span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
		</header>
 
		<div id="bcid">
			<!--盛放扫描控件的div-->
		</div>
 
		<div class="mui-bar mui-bar-footer" style="padding: 0px;">
			<div class="fbt" οnclick="scanPicture();">从相册选择二维码</div>
			<div class="fbt mui-action-back">取　 消</div>
		</div>
 
		<script type="text/javascript">
			scan = null; //扫描对象
			mui.plusReady(function() {
				mui.init();
				startRecognize();
			});
 
			function startRecognize() {
				try {
					var filter;
					//自定义的扫描控件样式
					var styles = {
						top: '100px',
						left: '0px',
						width: '100%',
						height: '500px',
						position: 'static',
					}
					//扫描控件构造
					scan = plus.barcode.create('bcid', filter, styles);
					scan.onmarked = onmarked;
					scan.onerror = onerror;
					plus.webview.currentWebview().append(scan);
					scan.start();
					//打开关闭闪光灯处理
					var flag = false;
					document.getElementById("turnTheLight").addEventListener('tap', function() {
						if (flag == false) {
							scan.setFlash(true);
							flag = true;
						} else {
							scan.setFlash(false);
							flag = false;
						}
					});
				} catch (e) {
					alert("出现错误啦:\n" + e);
				}
			};
 
			function onerror(e) {
				alert(e);
			};
 
			function onmarked(type, result) {
				var text = '';
				switch (type) {
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
				}
				//扫描成功之后的处理
				alert(text + " : " + result);
				scan.start();
			};
 
			// 从相册中选择二维码图片 
			function scanPicture() {
				plus.gallery.pick(function(path) {
					plus.barcode.scan(path, onmarked, function(error) {
						plus.nativeUI.alert("无法识别此图片");
					});
				}, function(err) {
					plus.nativeUI.alert("Failed: " + err.message);
				});
			}
		</script>
	</body>
</html>

五、需要注意的问题

　a，div占满整个页面
　　1，此div宽高都为100%，父级元素的高度也为此(依次类推直至根节点)，或者此div的position为absolute;
　　2，可采用js动态设置页面宽高，代码如下：

1
2
3
4
var height = window.innerHeight + 'px';//获取页面实际高度
var width = window.innerWidth + 'px';
document.getElementById("bcid").style.height= height;
document.getElementById("bcid").style.width= width;

　b，扫描控件有上下边距
　　采用填充黑色来淡化视觉上面的差异，未实际解决，（如果你解决的话，欢迎留言，谢谢）

六、源码下载

　　源码下载　(复制上面的代码，在MUI工程中已经可以正常运行，如果想进一步下载扫码功能示例工程，点击源码下载即可。但不建议直接下载工程，这样不利于思考，同时，为了维持小站能够继续经营下去，下载资源前还望能够打赏，感谢。如果有任何问题，可以在下方评论区留言)