基于MUI框架的使用HTML5+实现的二维码扫描功能并且其结果在webview中的信息的传递

最新推荐文章于 2023-12-26 17:22:04 发布

yanxi_liang

最新推荐文章于 2023-12-26 17:22:04 发布

阅读量3.5k

点赞数 1

本文链接：https://blog.csdn.net/LYX082912/article/details/78423469

版权

一、简介

Barcode模块管理条码扫描，提供常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

二、实现的效果

<!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="../../WEB-INF/plug/mui/css/mui.min.css" rel="stylesheet" />
		<script src="../../WEB-INF/plug/mui/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: #ffffff;
				width: 50%;
				float: left;
				line-height: 44px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: rgba(221, 221, 221, 0);z-index: 999999;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #ffffff;">H5webapp二维码扫描</h1>
			<span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
		</header>

		<div id="bcid">
			<!--盛放扫描控件的div-->
		</div>

		<div style="background-color: rgba(221, 221, 221, 0);z-index: 999999" 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">
			var height = window.innerHeight + 'px'; //获取页面实际高度  
			var width = window.innerWidth + 'px';
			document.getElementById("bcid").style.height = height;
			document.getElementById("bcid").style.width = width;

			scan = null; //扫描对象  
			mui.plusReady(function() { //通过mui初始化扫描
				mui.init();
				setTimeout("startRecognize()", 300)

			});

			function startRecognize() { //开启扫描
				try {
					var filter;
					//自定义的扫描控件样式  
					var styles = {
						frameColor: "#29E52C",
						scanbarColor: "#29E52C",
						background: "rgba(255,255,255,-20)"
					}
					//扫描控件构造  
					scan = new plus.barcode.Barcode('bcid', filter, styles);
					scan.onmarked = onmarked;
					scan.onerror = onerror; //扫描错误
					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) {
					mui.toast("出现错误啦:\n" + e)
				}
			};

			function onerror(e) { //错误弹框
				alert(e);
			};

			function onmarked(type, result) { //这个是扫描二维码的回调函数，type是扫描二维码回调的类型
				var text = '';
				switch(type) { //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
				}　
				smresult(result);
			};

			// 从相册中选择二维码图片   
			function scanPicture() { //可以直接识别二维码图片
				plus.gallery.pick(function(path) {
					plus.barcode.scan(path, onmarked, function(error) {
						//plus.nativeUI.alert("无法识别此图片");
						mui.toast("无法识别此图片");
					});
				}, function(err) {
					plus.nativeUI.alert("Failed: " + err.message);
				});
			}
			//关闭扫码页面
			function closeSm() {
				scan.close();
				plus.webview.currentWebview().close('none');
			}
			//结果处理
			function smresult(result) {
				var type = localStorage.getItem("type");
				if(type == "addfile") {
					//添加档案扫码处理
					if(result) {
						var str = '<li><input class="file-num" value="' + result + '" type="text"   /><i onclick="remove(this)">╳</i></li>'
						var wn = plus.webview.currentWebview(); //获取当前窗口的WebviewObject对象，即B 
						var wvA = wn.opener(); //获取当前窗口的创建者，即A  
						wvA.evalJS("addNew('" + str + "')"); //执行父窗口中的方法  A中的addNew方法  
						plus.webview.currentWebview().close(); //扫码成功，关闭当前webview
					} else {
						scan.start();
					}
				} else if(type == "getgezi") {
					//扫码格子获取格子信息
					alert("这是个格子扫码");
					localStorage.setItem("ifFrist", "none"); //设置不是首次调用
				} else if(type == "sys") {
					alert("这是个查询扫码");
					scan.start();
				}

			}
		</script>
	</body>

</html>

更多内容关注博主公众号

yanxi_liang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于MUI框架的使用HTML5+实现的二维码扫描功能并且其结果在webview中的信息的传递

一、简介 Barcode模块管理条码扫描，提供常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。二、实现的效果 #bcid { width: 100%; height: 100%
复制链接

扫一扫