avatar

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

一、条形码的由来

  条形码是由美国的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工程中已经可以正常运行,如果想进一步下载扫码功能示例工程,点击源码下载即可。但不建议直接下载工程,这样不利于思考,同时,为了维持小站能够继续经营下去,下载资源前还望能够打赏,感谢。如果有任何问题,可以在下方评论区留言)

文章作者: IT之旅
文章链接: https://www.meijindong.top/posts/2679031756.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 程序员在旅途
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论