首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hbuilder-二维码或条形码扫描 原

Hbuilder-二维码或条形码扫描 原

作者头像
tianyawhl
发布2019-04-04 10:55:32
2.2K0
发布2019-04-04 10:55:32
举报
文章被收录于专栏:前端之攻略前端之攻略

使用cordova可以实现扫描二维码或者条形码的功能,但是环境配置比较复杂,需要额外安装插件。

采用html5+同样也可以实现二维码扫描功能,配合Hbuilder打包(必须),方便快捷,并且还可以修改扫描框的样式,更强的灵活度。实现方法如下:

新建2个html页面,一个作为页面的展示,一个用作扫描二维码界面

作为页面展示的index.html页面

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript">
			function scaned(t, r, f) {
				var inputContent = document.getElementById("input");
				inputContent.value = r;
			}
		</script>

		<style type="text/css" media="screen">
			.hdata {
				color: #e1673e;
				font-size: 14px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		</style>
	</head>

	<body>

		<div id="dcontent" class="dcontent">
			<div class="button" onclick="clicked('test1.html',true,true)">扫一扫</div>
			<input type="text" id="input" />
		</div>
	</body>


</html>

common.js是用Hbuilder新建移动app hello html5+项目时生成的

扫描二维码页面test1.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript">
			var ws = null,
				wo = null;
			var scan = null,
				domready = false;
			// H5 plus事件处理
			function plusReady() {
				if(ws || !window.plus || !domready) {
					return;
				}
				// 获取窗口对象
				ws = plus.webview.currentWebview();
				wo = ws.opener();
				// 开始扫描
				ws.addEventListener('show', function() {
					var styles = {
						frameColor: "#65e102",
						scanbarColor: "#b7e871",
						background: "#000"
					}; //边框属性
					var filter; //扫码格式 空为全类型,不能省略
					scan = new plus.barcode.Barcode('bcid', filter, styles);
					scan.onmarked = onmarked;
					scan.start({
						conserve: true,
						filename: '_doc/barcode/'
					});
				}, false);
				// 显示页面并关闭等待框
				ws.show('pop-in');
				wo.evalJS('closeWaiting()');
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			// 监听DOMContentLoaded事件
			document.addEventListener('DOMContentLoaded', function() {
				domready = true;
				plusReady();
			}, false);
			// 二维码扫描成功
			function onmarked(type, result, file) {
				switch(type) {
					case plus.barcode.QR:
						type = 'QR';
						break;
					case plus.barcode.EAN13:
						type = 'EAN13';
						break;
					case plus.barcode.EAN8:
						type = 'EAN8';
						break;
					default:
						type = '其它' + type;
						break;
				}
				result = result.replace(/\n/g, '');
				wo.evalJS("scaned('" + type + "','" + result + "','" + file + "');");
				back();
			}
			// 从相册中选择二维码图片 
			function scanPicture() {
				plus.gallery.pick(function(path) {
					plus.barcode.scan(path, onmarked, function(error) {
						plus.nativeUI.alert('无法识别此图片');
					});
				}, function(err) {
					console.log('Failed: ' + err.message);
				});
			}
		</script>
		
		<style type="text/css">
			#bcid {
				width: 100%;
				position: absolute;
				top: 0px;
				bottom: 44px;
				text-align: center;
			}
			
			.tip {
				color: #FFFFFF;
				font-weight: bold;
				text-shadow: 0px -1px #103E5C;
			}
			
			footer {
				width: 100%;
				height: 44px;
				position: absolute;
				bottom: 0px;
				line-height: 44px;
				text-align: center;
				color: #FFF;
			}
			
			.fbt {
				width: 50%;
				height: 100%;
				background-color: #FFCC33;
				float: left;
			}
			
			.fbt:active {
				-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
				box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
			}
		</style>
	</head>

	<body style="background-color: #000000;">
		<div id="bcid">
			<div style="height:40%"></div>
			<p class="tip">...载入中...</p>
		</div>
		<footer>
			<div class="fbt" onclick="back()">取  消</div>
			<div class="fbt" onclick="scanPicture()">从相册选择二维码</div>
		</footer>
	</body>

</html>

设置扫描框特定样式主要用到的代码,默认是红色的

var styles = {                         frameColor: "#65e102",                         scanbarColor: "#b7e871",                         background: "#000"                     }; //边框属性 var filter; //扫码格式 空为全类型,不能省略 scan = new plus.barcode.Barcode('bcid', filter, styles);

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/02/27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档