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

Question

我已经成功地添加了条码扫描器插件在我的Androidphonegap应用程序这里是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区域，点击按钮即可执行扫描并读取条形码。

Answer 1

条形码扫描屏幕作为Android活动实现，它完全隐藏了PhoneGap的Web视图。如果您想自定义此屏幕，您可能需要以某种方式更改其布局文件。

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

另请参阅Simon Mac Donald的博客（他似乎正在开发Android上的条形码扫描插件）和这个答案（这正是我上面写的，快照：P）。