Ionic framework 扫描页面内的条形码扫描仪添加按钮

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

phonegap插件条码扫描器

plugin

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

添加插件后，使用

bower安装ngCordova

添加到

ng cordova.js

js文件的链接，参见

cordova.js

：

index.html

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

现在您可以像这样使用插件了：

控制器：

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>

查看：

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>

扫描

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

您不能从JS直接与扫描仪交互

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

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

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

• plugin.xml：所有依赖项的家
• 您的_Activity.java:java文件，允许通过调用按钮、文本视图、布局等与扫描仪视图本身进行交互
• java:java文件，该文件从插件的js文件获取并返回参数
• Your_Layout.xml:res/Layout中的xml文件，由java解释的xml属性组成

除此之外，我还从GitHub找到了两个用于cordova/ionic应用程序的好插件：

• phonegap/phonegap插件条形码扫描仪
• tjwoon/csZBar

还有一个昂贵的，Scandit，它解决了你所有的问题，每月大约200美元，检查他们提出的每个解决方案的定价

如果您使用他们的SDK，由于他们的工作，您可能能够与js文件中的scanner视图进行交互，但据我所知，他们是唯一一家这样做的公司。（也许是海牛的作品…）

这一部分是我自7月中旬以来一直在做的事情，目的是给大家一些想法

---

我目前正在为我的ionic应用程序制作ANDROID扫描仪布局。 你可以找到我的GitHub存储库，我从tjwoon的csZBar中找到了它，并添加了我的ionic应用程序需要的一些东西

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

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

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

有关更多信息，请参阅自述文件和Java文件（csZBar/android/）

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

---

警告

• 1） 它目前正在开发中，因此使用它的风险由您自己承担（使用branch master，而不是develop）
• 2） 我只修改了android部分，没有修改iOS
• 3） 它不适用于Windows phone

---

到目前为止您尝试了什么？我已经创建了一个服务来调用扫描仪。请参阅此代码段：：cordova.plugins.barcodeScanner.scan（函数（结果）{//success deferred.resolve（{'error'：false，'result'：result}）；}，函数（error）{//failure deferred.resolve（{'error'：true，'result'：error.toString（）}）; } );@请尝试我在下面发布的答案，我已经测试过了，它似乎起作用了。Prashant，这已经起作用了。但这只是打开扫描仪，在页面底部显示一条文本消息“在取景器矩形内放置条形码进行扫描”。我需要在文本上方添加一个按钮。对我来说，我可以扫描QR/条形码并提醒值。对不起，我误解了，但你想实现什么？是的，我也能做到。但是现在我需要在scanner视图中添加一个按钮，以便在我想退出扫描过程时可以返回到某个页面。我怀疑您是否可以在camera视图中添加自定义按钮，因为一旦您进入该视图，所有内容都由插件控制（文档中没有显示任何内容）。我可以看到iOS的

取消
按钮，IDK关于android tho。我也需要在windows中实现。不，android中没有可见的取消按钮。所以我必须在里面加一个按钮。我在移动应用程序中看到了一个按钮，所以一定有办法。我会继续努力的。如果你也能找到办法，请一定要告诉我。