条码扫描仪在扫描页面内添加按钮

Question

我已经在我的Ionic项目中为iOS和Android实现了条形码扫描器。

但是当我的扫描器启动时，我想在视图内添加一个按钮并添加一个事件。

我正在使用phonegap-plugin-barcodescanner插件。

请帮我说明如何在扫描视图内附加内容。

- SSen

---

你到目前为止尝试了什么？ - Dieter Meemken

我创建了一个调用扫描仪的服务。 请查看以下代码片段： cordova.plugins.barcodeScanner.scan( function (result) { // 成功 deferred.resolve({'error':false, 'result': result}); }, function (error) { // 失败 deferred.resolve({'error':true, 'result': error.toString()}); } ); - SSen

@SSen，请尝试我下面发布的答案，我已经测试过了，似乎可以正常工作。 - Prashant Ghimire

Answer 1

如果您想要添加内容到扫描仪的布局中，您需要在插件本身中编写代码。

您无法直接从JS与扫描仪进行交互。

事实上，您使用的插件使用cordova.exec来通过传递参数启动扫描器视图。

对于Android，您只需要了解Java和一些XML。

对于iOS，您需要了解Objective-C / Swift。

对于Android，您可能需要修改4个文件： plugin.xml：所有依赖项的主页

Your_Activity.java：Java文件，可以通过调用按钮、文本视图、布局等与扫描仪视图本身进行交互

Your_Main.java：Java文件，从插件的js文件获取并返回参数

Your_Layout.xml：res/layout中的xml文件，由Java解释的xml属性组成

此外，我从GitHub上找到了两个适用于cordova/ionic应用程序的不错的插件： phonegap/phonegap-plugin-barcodescanner tjwoon/csZBar

这里有一个昂贵的选择，Scandit，大约每月200美元，可以解决你所有的问题，请查看他们提供的每个方案的定价。

如果使用他们的SDK，由于他们的工作，你可能能够从js文件中与扫描器视图进行交互，但是他们是我所知道唯一能够做到这一点的公司。(也许ManateeWorks...)

下面是我自7月中旬以来一直在做的事情，为了给你提供一些思路。

---

我正在为我的ionic应用程序制作一个ANDROID扫描仪布局。您可以在这里找到我的GitHub存储库，我从tjwoon的csZBar中进行了分支并添加了一些我ionic应用程序所需的内容。

我不能保证什么，但我相当确定我很快就会实现iOS布局（至少我会尝试），不幸的是我真的不知道android / iOS移动编程。 这是布局的屏幕截图 我制作了一个由3个图像按钮组成的“选项卡栏”，由文本视图和图像按钮组成的“顶部栏”。扫描仪嵌入在这两者之间。

应用程序的功能有弹出窗口，可以暂停扫描器并响应单击事件。

更多信息请参见README和Java文件（csZBar / android /）。

请随时提问和/或检查我的代码。

---

警告

• 1) 目前仍在开发中，使用需自负风险（请使用主分支master，而非develop）
• 2) 我只修改了安卓部分，没有涉及iOS！
• 3) 不适用于Windows手机...

- aNkM

Answer 2

添加插件后，使用bower install ngCordova安装installngCordova。

在引用cordova.js之前，添加链接到ng-cordova.js JS文件：

index.html

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

另外，不要忘记添加ngCordova模块：

app.js

angular.module('myApp', ['ngCordova'])

现在你已经准备好像这样使用插件：

控制器：

var module = angular.module('starter.controllers', []);
module.controller('BarcodeCtrl', function($scope, $cordovaBarcodeScanner, $ionicPlatform) {
  $ionicPlatform.ready(function(){
    $scope.scan = function() {
        $cordovaBarcodeScanner
          .scan()
          .then(function(barcodeData) {
            alert(JSON.stringify(barcodeData));
          }, function(error) {
            alert(error);
          });
      };
  });
});

视图：

<button ng-click="scan()">Scan</button>

- Prashant Ghimire

---

Prashant，这已经可以工作了。但是它只是简单地打开扫描仪，在页面底部显示一个文本消息“将条形码放入取景器矩形内进行扫描。” 我需要在这个文本上方添加一个按钮。 - SSen

是的，我也能做到。但现在我需要在扫描视图中添加一个按钮，以便在需要退出扫描过程时可以返回某个页面。 - SSen

我怀疑在相机视图中是否可以添加自定义按钮，因为一旦进入该视图，所有内容都由插件控制（文档也没有显示任何内容）。我能看到iOS上的“取消”按钮，但不确定Android是否有。 - Prashant Ghimire

你尝试过在Android上使用返回按钮（或为返回按钮单击分配事件）吗？类似的帖子：http://stackoverflow.com/questions/31674832/cordova-barcode-scanner-on-android-cancel-scan-and-return-to-app - Prashant Ghimire

是否有人对此问题有解决方案？请指导一下。 - SSen