使用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({});