MUI 结合 HTML5+ 实现的二维码扫描功能

我会带着你远行 2022-02-16 00:59 301阅读 0赞

一、说明

二维码的扫描在手机APP的开发中是很常见的一个需求，毕竟用的也多嘛。html5+ 提供了 Barcode模块管理条码扫描，支持常见的条码（一维码及二维码）的扫描识别功能。可调用设备的摄像头对条码图片扫描进行数据输入，解码后返回码数据及码类型。通过plus.barcode可获取条码码管理对象。（[html5产业联盟][html5]）(更好的阅读体验，请移步我的[个人博客][Link 1])

二、实现效果

![2019042111584444.png][]

三、主要实现代码逻辑（[完整项目案例][Link 2]）

与之前写的有一些差别，这个是组件更新之后的写法，并修复了评论中出现的部分问题。上一篇博客地址：[基于MUI框架的使用HTML5+实现的二维码扫描功能][MUI_HTML5]

<!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 class="mui-bar mui-bar-footer" style="padding: 0px;">
    			<div class="fbt" onclick="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>

三、总结

1，这个模块还是存在一些问题的，不能像原生的那样顺滑，并且，还没有全屏，通过调样式实现的话，效果也不是那么好。

2，关于样式上面的调节，在[上一篇博客][MUI_HTML5]有介绍，这里不再赘述。

3，这篇博客是接着上一篇的，主要修复了评论下面提出的问题。

4，完整项目案例[链接][Link 2]。

[html5]: http://www.html5plus.org/#home
[Link 1]: https://www.meijindong.top/posts/2679031756.html
[2019042111584444.png]: /images/20220216/752c36d6c9db42e49ddf79910d6a81be.png
[Link 2]: https://download.csdn.net/download/qq_24754061/11132979
[MUI_HTML5]: https://blog.csdn.net/qq_24754061/article/details/54943655