7

我已经在我的 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页面 在此处输入图像描述

需要这样展示 在此处输入图像描述

4

1 回答 1

2

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

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

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

于 2012-08-26T21:40:01.593 回答