Ionic开发之条形码扫描

近来项目支付中有扫描条码的须求,查阅一些材质之后发现ngCordova扩张了cordova的插件–BarcodeScanner,提供了以下格式的条形码扫描。

QR Code
Data Matrix
UPC E
UPC A
EAN 8
EAN 13
Code 128
Code 39
ITF

周到的协理全体格式,插件本身使用流行的库ZXing。

将条码扫描器整合进AndroidiOS动用的手续如下:

壹 、新建项目

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

借使没有选拔mac开发,就毫无纠结ios平台咯。

② 、添加条码扫描插件

cordova plugin add https://github.com/wildabeast/BarcodeScanner.git

今昔从技术上来说,你能够只使用那几个插件来完结你的条形码扫描,不过我们决定动用ngCordova来使一切更便于。 
有关ngCordova是何许呢,且看介绍:

ngCordova was built to help make app development faster and more
efficient than ever before. It gives you
simple AngularJS wrappers for
the most popular Cordova and PhoneGap plugins available, where you can
take a picture, scan a barcode, upload a file, turn on your
flashlight, get your current location, and much more with just a few
lines of code.

3、加入ng-cordova.min.js

下载最新版本的ngCordova,将ng-cordova.min.js拷贝到花色的www/js目录。 
图片 1 
在index.html中引用:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">

修改配置,将ngCordova注入angular

var exampleApp = angular.module('starter', ['ionic','ngCordova'])

4、编写controller(app.js)

exampleApp.controller("ExampleController", function($scope, $cordovaBarcodeScanner) {
$scope.scanBarcode = function() {
    $cordovaBarcodeScanner.scan().then(function(imageData) {
        alert(imageData.text);
        console.log("Barcode Format -> " + imageData.format);
        console.log("Cancelled -> " + imageData.cancelled);
    }, function(error) {
        console.log("An error happened -> " + error);
    });
};
});

在控制器中须求引入$cordovaBarcodeScanner,扫描器重返三个AngularJS
promise,告诉我们扫描是不是中标。

⑤ 、方法调用

 <ion-content ng-controller="ExampleController">
  <button class="button" ng-click="scanBarcode()">Scan</button>
 </ion-content>

测试: 
图片 2

图片 3

图片 4

图片 5

迄今停止,我们早就到位了一个简短的条形码扫描应用。

demo code source

相关文章