警告

Question

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

请帮我解决如何在扫描视图中附加内容。

Answer 1

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

你不能直接与JS的扫描仪交流。

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

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

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

plugin.xml：所有依赖项的主页
Your_Activity.java：java文件，允许通过调用按钮，textview，布局等与扫描器视图本身进行交互...
Your_Main.java：获取并从插件的js文件返回参数的java文件
Your_Layout.xml：res / layout中的xml文件，由java解释的xml属性组成

除此之外，我从GitHub发现了两个用于cordova /离子应用程序的好插件：

的PhoneGap / PhoneGap的-插件-barcodescanner
tjwoon / csZBar

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

如果您使用他们的SDK，您可以通过js文件与扫描仪视图进行交互，因为他们的工作，但他们是我所知道的唯一一家公司。（也许是ManateeWorks ......）

根据这一部分是我自7月中旬以来一直在做的事情，以便给你提供想法。

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

我什么都不保证，但我很确定我很快会实现iOS版面设计（至少我会尝试），不幸的是我真的不知道android / iOS手机编程。

Here's a screenshot of the layout

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

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

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

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

警告

1）目前正在开发中，因此请自行承担使用风险（使用分支机构，不要开发）
2）我只修改了android部分，而不是iOS！
3）它不适用于Windows手机......

Answer 2

添加插件后installngCordova与bower install ngCordova

添加ng-cordova.js JS文件的链接，高于对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>

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

2 个答案:

警告