跨平台开发框架Ionic学习之路------3(使用barcodescanner扫描)

今天使用ionic实现的一个条码扫描的小demo,方便自己以后备用。

1、依赖的库文件:barcodescanner插件与ngCordova.js文件

2、步骤如下:

ionic start ionicBarcode blank

cd ionicBarcode

ionic platform add android

此步骤是创建一个ionic的空项目并添加android环境

2.1 添加二维码扫描插件

cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git

此步骤介绍之后plugins文件夹下面会有一个phonegap-plugin-barcodescanner文件夹扫描的相应的库文件,并且platforms/android/AndroidManifest.xml会添加相应的配置、权限。注这个步骤最好不要手动添加插件文件。

2.2 添加ngcordova

下载ng-cordova.js

https://github.com/driftyco/ng-cordova/releases 
将ng-cordova.js拷贝到项目的www/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、上代码了

引入ng-cordova.js文件,切记在cordova.js文件之前引入。

拍照的处理代码

// 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)
    })
  }
});

接下来在html控件绑定btnScan事件

拍摄

4、编译运行项目

ionic build android

编译成功之后再对于的输出文件找到apk文件,放入到模拟器或者真机中查看效果。

ps.关于项目html、css、js部分的代码我推荐使用WebStorm.这个angular代码、css样式的联想功能十分强大。

这是下载下来的ionic项目目录,直接在WebStorm打开

使用起来十分方便,特别推荐。