yicixing
yicixing
  • 发布:2015-08-12 16:10
  • 更新:2019-03-01 10:42
  • 阅读:4695

多次扫描二维码后,会造成 红色的扫描小窗口 跑到左上角。

分类:HTML5+
        见下图。 扫描二维码(或条形码)后,返回上界面。再扫描二维码后返回。多次重复。再次进入扫描页面时,发现红色的扫描小窗口位置在屏幕左上角。  
        但是扫描功能正常,手机屏幕中心区域仍然可以扫描成功。  
       helle5+ 的demo范例,扫描模块也有此bug。  

2015-08-12 16:10 负责人:无 分享
已邀请:
yicixing

yicixing (作者)

         满足不了。因为我们的扫描界面样式不可能和官方demo(barcode_scan.html)完全一样,需要自定义位置、大小,比如我们需要红色扫描小窗放到屏幕上部分,空出下部分展示扫描结果。  
        相信有扫描需求的app都会碰到这个bug。希望官方尽早解决。否则我们只能放弃而使用第三方的扫描模块、或者自己开发扫描模块。  
    一起加油!@DCloud_Android_磊子      @DCloud_Android_ST 
BoredApe

BoredApe - 有问题就会有答案。

你好,请问你的安卓版本是多少?

DCloud_Android_ST

DCloud_Android_ST

你好 我使用三星S4连续扫描了20次 未发现你所描述的情况,你手机系统多少,是毕现问题吗

net

net

这个问题可能是demo范例中,new plus.barcode.Barcode('bcid', filter);
其中div bcid的大小调整过小时,会发生闪退或者左上方扫描框现象,必现。
测试手机为小米2 华为honor 三星note2都发生上述情况

yicixing

yicixing (作者)

demo范例中,new plus.barcode.Barcode('bcid', filter);
其中div bcid的大小调整过小时,会发生闪退。扫描条形码多次后红色扫描窗会左上移。
安卓手机均必现。小米2a最严重。
我们有需求,要把扫描窗口调整位置到页面上面,把页面下部分空出来。有解决方案吗?

DCloud_Android_ST

DCloud_Android_ST

提供一下测试代码 我调试一下看看

yicixing

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

yicixing (作者)

 对于有扫描功能的app,扫描界面自定义的需求特别强烈。希望尽快支持自定义扫描窗口,解决扫描二维码窗口不支持调整大小的bug。 @DCloud_Android_ST 
Android_磊子

Android_磊子

确实有此问题,目前Hello H5的二维码展示页面是否可以满足你的需要?

yicixing

yicixing (作者)

HBuilder更新,解决了这个扫码的大bug,这是个很重要的更新。还是很高兴的。多谢大家的努力了! @DCloud_Android_磊子 @DCloud_Android_ST

niehaiquan

niehaiquan

二维码扫描一次之后,跳到其他窗口,再返回到二维码扫描窗口,发现扫描区域黑屏,无法继续扫面

  • DCloud_Android_ST

    只能重新开一个扫描页面 之前的页面要关闭掉

    2015-11-26 11:04

  • niehaiquan

    回复 DCloud_Android_ST:比如说有三个窗口 扫面窗口在中间 如果扫描完成后关掉扫描窗口,进入第三个窗口的时候,会看到第一个窗口突然显示一下消失,然后再看到第三个窗口

    2015-11-26 11:22

  • niehaiquan

    还有如何能做到整个手机屏幕都显示扫描,而不是那个div 而且div好像不能设置成宽高设置成100% 根本就不显示扫描区域

    2015-11-26 11:25

  • DCloud_Android_ST

    回复 niehaiquan:先显示第三个窗口然后再关闭

    2015-11-26 11:28

freemudHB

freemudHB

我今天也遇到了这样的问题 hubilder也更新到了最新 请问你是怎么解决的

自由鸟007

自由鸟007 - 一位无名的开发者......

我的目前依然存在这个问题

1525941857QQ

1525941857QQ - 忍冬

依然出现了这个问题,请问有解决的方法吗?

该问题目前已经被锁定, 无法添加新回复