见下图。 扫描二维码(或条形码)后,返回上界面。再扫描二维码后返回。多次重复。再次进入扫描页面时,发现红色的扫描小窗口位置在屏幕左上角。
但是扫描功能正常,手机屏幕中心区域仍然可以扫描成功。
helle5+ 的demo范例,扫描模块也有此bug。
- 发布:2015-08-12 16:10
- 更新:2019-03-01 10:42
- 阅读:4916
yicixing (作者)
满足不了。因为我们的扫描界面样式不可能和官方demo(barcode_scan.html)完全一样,需要自定义位置、大小,比如我们需要红色扫描小窗放到屏幕上部分,空出下部分展示扫描结果。
相信有扫描需求的app都会碰到这个bug。希望官方尽早解决。否则我们只能放弃而使用第三方的扫描模块、或者自己开发扫描模块。
一起加油!@DCloud_Android_磊子 @DCloud_Android_ST
这个问题可能是demo范例中,new plus.barcode.Barcode('bcid', filter);
其中div bcid的大小调整过小时,会发生闪退或者左上方扫描框现象,必现。
测试手机为小米2 华为honor 三星note2都发生上述情况
yicixing (作者)
demo范例中,new plus.barcode.Barcode('bcid', filter);
其中div bcid的大小调整过小时,会发生闪退。扫描条形码多次后红色扫描窗会左上移。
安卓手机均必现。小米2a最严重。
我们有需求,要把扫描窗口调整位置到页面上面,把页面下部分空出来。有解决方案吗?
yicixing (作者)
测试代码如下。把 官方h5+ demo的 barcode_scan.html 里,#bcid 的高度调整为
bottom: 60%; 就会闪退。测试机型:小米2a,三星note2。@DCloud_Android_ST
<!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/"});
});
// 显示页面并关闭等待框
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 = "其它";
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){
plus.nativeUI.alert("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: 60%;
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">
<br/><br/><br/><br/><br/>
<p class="tip">...载入中...</p>
</div>
<footer>
<div class="fbt" onclick="back();">取 消</div>
<div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
</footer>
</body>
</html>
yicixing (作者)
HBuilder更新,解决了这个扫码的大bug,这是个很重要的更新。还是很高兴的。多谢大家的努力了! @DCloud_Android_磊子 @DCloud_Android_ST
二维码扫描一次之后,跳到其他窗口,再返回到二维码扫描窗口,发现扫描区域黑屏,无法继续扫面
-
回复 DCloud_Android_ST:比如说有三个窗口 扫面窗口在中间 如果扫描完成后关掉扫描窗口,进入第三个窗口的时候,会看到第一个窗口突然显示一下消失,然后再看到第三个窗口
2015-11-26 11:22