phonegap android应用程序中固定div中的zxing条码扫描仪

Question

我已在我的 android phonegap 应用程序中成功添加了 zxing 条码扫描器插件，这是 js 代码，页面显示我能够看到条码扫描器屏幕。

  $('#scanpage').live('pageshow', function (event, ui) {
    //navigator.notification.alert("Search page");

    window.plugins.barcodeScanner.scan( function(result) {
        //navigator.notification.alert("We got a barcode\n" +   "Result: " + result.text + "\n" +"Format: " + result.format + "\n" +
            //    "Cancelled: " + result.cancelled);
         }, function(error) {
        navigator.notification.alert("Scanning failed: " + error);
    }); 

});

这里是html5页面代码

div id="scanpage" data-role="page">
<div data-role="header" class="pageheader">

<div class="height30" style="padding-right:2%;">
 <div class="back" style="margin-right:2%;"><a href="#homepage">Back</a></div>
<div class="logo2" ><a href="#"  ><img src="images/scan.png" style="padding-top:12px;" alt="Scan Code" /></a>
</div>
 </div>
 </div> 

<div data-role="content"  class="wrapper" style="width:100%">


 <div style="background-color:#000000;" >
 <div style="height:400px;" id="scanarea"></div>


 <input name="" type="button" class="button" value="Focus and Scan" data-role="none"   />

  </div><!-- inner div-->


</div>  
   </div> <!-- end SCAN PAGE -->

但是它是如何工作的，当我打开页面时首先加载 html，但在第二个整个屏幕上覆盖着条形码扫描仪窗口，我想在 DIV 'scanarea' 中修复这个扫描区域。但不知道如何修复它在某些 div 区域和按钮单击扫描将执行并读取条形码。

扫描窗口

html页面

需要这样显示

Answer 1

条形码扫描屏幕被实现为完全隐藏 PhoneGap 的 web 视图的 Android 活动。如果您想自定义此屏幕，您可能需要以某种方式更改其layout file。

我假设您的“聚焦并扫描”按钮应该触发手动扫描（我认为默认是识别第一个条形码）——因此您可能必须更改 activity implementation 以包含该按钮的处理程序。

另见Simon Mac Donald's blog（他似乎正在开发Android 上的条形码扫描插件）和this answer（这正是我在上面写的，snap :P）。