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

Question

我已经为我的 Ionic 项目实现了条码扫描器，适用于 iOS 和 Android。 但是当我的扫描仪启动时，我想在视图中添加一个按钮并向其中添加一个事件。 我正在使用phonegap-plugin-barcodescanner 插件

请帮助我如何在扫描视图中附加一些内容。

Answer 1

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

您不能直接与来自 JS 的扫描仪交互。

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

• 对于 Android，您只需了解 Java 和一些 XML。
• 对于 iOS，您必须了解 Objective-C / Swift。

对于 Android，您可能需要修改 4 个文件：

• plugin.xml : 所有依赖项的主页
• Your_Activity.java：允许通过调用按钮、文本视图、布局等与扫描仪视图本身进行交互的 java 文件...
• Your_Main.java ：从插件的 js 文件获取和返回参数的 java 文件
• 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 存储库 here，我从 tjwoon 的 csZBar 分叉了它，并添加了一些我的 ionic 应用程序需要的东西。

我什么都不保证，但我很确定我很快就会实现一个 iOS 布局（至少我会尝试），不幸的是我并不真正了解 android / iOS 移动编程。

Here's a screenshot of the layout

我制作了一个由 3 个图像按钮组成的“标签栏”，一个由文本视图和图像按钮组成的“顶部栏”。扫描仪嵌入在这两者之间。

应用程序功能的弹出窗口会暂停扫描仪并响应点击事件。

有关详细信息，请参阅 README 和 Java 文件 (csZBar/android/)。

不要犹豫，提出问题和/或检查我的代码。

---

警告

• 1) 它目前正在开发中，因此使用它需要您自担风险（使用分支 master，而不是开发）
• 2) 我只修改了android部分，没有修改iOS！
• 3) 不适用于 Windows phone...

Answer 2

添加插件后，installngCordova 和 bower install ngCordova

在上面引用cordova.js的JS文件中添加ng-cordova.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>