今天使用ionic實現的一個條碼掃描的小demo,方便自己以後備用。

1、依賴的庫檔案:barcodescanner外掛與ngCordova.js檔案

2、步驟如下:

ionic start ionicBarcode blank

cd ionicBarcode

ionic platform add android

此步驟是建立一個ionic的空專案並新增android環境

2.1 新增二維碼掃描外掛

此步驟介紹之後plugins資料夾下面會有一個phonegap-plugin-barcodescanner資料夾掃描的相應的庫檔案,並且platforms/android/AndroidManifest.xml會新增相應的配置、許可權。注這個步驟最好不要手動新增外掛檔案。

2.2 新增ngcordova

下載ng-cordova.js

也可以用下面的方法下載 
bower install ngCordova 

此步驟執行之後www/lib/ngCordova/dist路徑下面出現4個檔案ng-cordova.js、ng-cordova.min.js、ng-cordova-mocks.js、ng-cordova-mocks.min.js

ng-cordova.js就是我們所需要的。

3、上程式碼了

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
 

拍照的處理程式碼

// Ionic Starter App
var app = angular.module('starter', ['ionic','ngCordova']);
app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
app.controller("proCtrl",function ($scope,$cordovaBarcodeScanner) {
  $scope.btnScan = function () {
    $cordovaBarcodeScanner.scan().then(function (imageData) {
      alert(imageData.text);
    },function (err) {
      alert(err)
    })
  }
});
 

<button class="button button-positive" ng-click="btnScan()">拍攝</button>

ionic build android

編譯成功之後再對於的輸出檔案找到apk檔案,放入到模擬器或者真機中檢視效果。

ps.關於專案html、css、js部分的程式碼我推薦使用WebStorm.這個angular程式碼、css樣式的聯想功能十分強大。

這是下載下來的ionic專案目錄,直接在WebStorm開啟

使用起來十分方便,特別推薦。