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

置顶程序员在旅途

已于 2022-05-15 21:35:41 修改

阅读量9.4k

点赞数 7

分类专栏： MUI 文章标签： html5 javascript 前端

于 2019-04-21 12:07:10 首次发布

本文链接：https://blog.csdn.net/qq_24754061/article/details/89430592

版权

MUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

一、说明

二维码的扫描在手机APP的开发中是很常见的一个需求，毕竟用的也多嘛。html5+ 提供了 Barcode模块管理条码扫描，支持常见的条码（一维码及二维码）的扫描识别功能。可调用设备的摄像头对条码图片扫描进行数据输入，解码后返回码数据及码类型。通过plus.barcode可获取条码码管理对象。（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>

		<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，关于样式上面的调节，在上一篇博客有介绍，这里不再赘述。

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

4，完整项目案例链接。

程序员在旅途

关注

7
点赞
踩
16

收藏

觉得还不错? 一键收藏
14
评论
MUI 结合 HTML5+ 实现的二维码扫描功能

MUI 结合 HTML5+ 实现的二维码扫描功能一、说明二维码的扫描在手机APP的开发中是很常见的一个需求，毕竟用的也多嘛。html5+ 提供了Barcode模块管理条码扫描，支持常见的条码（一维码及二维码）的扫描识别功能。可调用设备的摄像头对条码图片扫描进...
复制链接

扫一扫