标签：function 扫码 APP barcode plus result var 完整版 type
模拟器效果图
三个页面
- 首页
<!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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。