Ionic开发之久形码扫描

最近路开支被生扫描条码的急需,查阅一些素材后发现ngCordova扩展了cordova的插件–BarcodeScanner,提供了以下格式的条形码扫描。

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

一应俱全的支撑所有格式,插件本身使用流行的库ZXing。

拿条码扫描器整合进Android和iOS应用之步骤如下:

1、新建项目

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

一经没有下mac开发,就无须纠结ios平台咯。

2、添加条码扫描插件

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,告诉我们扫描是否中标。

5、方法调用

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

测试: 
图片 2

图片 3

图片 4

图片 5

从那之后,我们已做到了一个大概的条形码扫描下。

demo code source

相关文章