H5+ APP扫码测试完整版
作者:互联网
模拟器效果图
三个页面
- 首页
<!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 img = null;
var blist = [];
function scaned(t, r, f) {
var d = new Date();
var h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds(),
ms = d.getMilliseconds();
if (h < 10) {
h = '0' + h;
}
if (m < 10) {
m = '0' + m;
}
if (s < 10) {
s = '0' + s;
}
if (ms < 10) {
ms = '00' + ms;
} else if (ms < 100) {
ms = '0' + ms;
}
var ts = '[' + h + ':' + m + ':' + s + '.' + ms + ']';
var li = null,
hl = document.getElementById('history');
if (blist.length > 0) {
li = document.createElement('li');
li.className = 'ditem';
hl.insertBefore(li, hl.childNodes[0]);
} else {
li = document.getElementById('nohistory');
}
li.id = blist.length;
var html = '[' + h + ':' + m + ':' + s + '.' + ms + ']' + ' ' + t + '码<div class="hdata">';
html += r;
html += '</div>';
li.innerHTML = html;
li.setAttribute('onclick', 'selected(id)');
blist[blist.length] = {
type: t,
result: r,
file: f
};
update(t, r, f);
}
function selected(id) {
var h = blist[id];
update(h.type, h.result, h.file);
if (h.result.indexOf('http://') == 0 || h.result.indexOf('https://') == 0) {
plus.nativeUI.confirm(h.result, function(i) {
if (i.index == 0) {
plus.runtime.openURL(h.result);
}
}, '', ['打开', '取消']);
} else {
plus.nativeUI.alert(h.result);
}
}
function update(t, r, f) {
outSet('扫描成功:');
outLine(t);
outLine(r);
outLine('\n图片地址:' + f);
if (!f || f == 'null') {
img.src = './img/barcode.png';
} else {
plus.io.resolveLocalFileSystemURL(f, function(entry) {
img.src = entry.toLocalURL();
});
//img.src = 'http://localhost:13131/'+f;
}
}
function onempty() {
if (window.plus) {
plus.nativeUI.alert('无扫描记录');
} else {
alert('无扫描记录');
}
}
function cleanHistroy() {
if (blist.length > 0) {
var hl = document.getElementById('history');
hl.innerHTML = '<li id="nohistory" class="ditem" οnclick="onempty();">无历史记录 </li>';
}
plus.io.resolveLocalFileSystemURL('_doc/barcode/', function(entry) {
entry.removeRecursively(function() {
// Success
}, function(e) {
//alert( "failed"+e.message );
});
});
}
</script>
<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
<style type="text/css" media="screen">
.hdata {
color: #e1673e;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body onl oad="img=document.getElementById('bimg')">
<header id="header">
<div class="nvbt iback" onclick="back()"></div>
<div class="nvtt">Barcode</div>
<div class="nvbt idoc" onclick="openDoc('Barcode Document','/doc/barcode.html')"></div>
</header>
<div id="dcontent" class="dcontent">
<br />
<img style="width:40%" id="bimg" src="./img/barcode.png" />
<br />
<div class="button" onclick="clicked('barcode_scan.html',true,true)">扫一扫</div>
<div class="button" onclick="clicked('barcode_scan2.html',true,true)">扫一扫(自定义)</div>
<br />
<ul id="history" class="dlist" style="text-align:left;">
<li id="nohistory" class="ditem" onclick="onempty()">无历史记录 </li>
</ul>
<br />
<div class="button button-waring" onclick="cleanHistroy()">清空历史记录</div>
</div>
<div id="output">
Barcode提供二维码扫描识别功能,支持调用摄像头即时扫描二维码,也可直接输入图片进行扫描识别。
</div>
</body>
<script type="text/javascript" src="./js/immersed.js"></script>
</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() {
scan = new plus.barcode.Barcode('bcid');
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>
<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
<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>
- 扫一扫(自定义)
<!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,
bCancel = false;
// H5 plus事件处理
function plusReady() {
if (ws || !window.plus || !domready) {
return;
}
// 获取窗口对象
ws = plus.webview.currentWebview();
wo = ws.opener();
// 开始扫描
ws.addEventListener('show', function() {
scan = new plus.barcode.Barcode('bcid', [plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13], {
frameColor: '#00FF00',
scanbarColor: '#00FF00'
});
scan.onmarked = onmarked;
scan.start({
conserve: true,
filename: '_doc/barcode/'
});
});
// 显示页面并关闭等待框
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 scanSwitch() {
if (bCancel) {
scan.start({
conserve: true,
filename: '_doc/barcode/'
});
btCancel && (btCancel.innerText = '暂 停');
} else {
scan.cancel();
btCancel && (btCancel.innerText = '开 始');
}
bCancel = !bCancel;
}
</script>
<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
<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 id="btCancel" class="fbt" onclick="scanSwitch()">暂 停</div>
</footer>
</body>
</html>
由于自带的css及js 文件太多 网页呈现不了 所以我将测试项目已打包
需要自取H5+ APP扫码测试完整版
下载完成后HBuilder X 打开项目直接模拟器或者真机即可进行调试
标签:function,扫码,APP,barcode,plus,result,var,完整版,type 来源: https://blog.csdn.net/spc007spc/article/details/116082565