今天使用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、上代码了
<!-- 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>
引入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事件
<button class="button button-positive" ng-click="btnScan()">拍摄</button>
4、编译运行项目
ionic build android
编译成功之后再对于的输出文件找到apk文件,放入到模拟器或者真机中查看效果。
ps.关于项目html、css、js部分的代码我推荐使用WebStorm.这个angular代码、css样式的联想功能十分强大。
这是下载下来的ionic项目目录,直接在WebStorm打开
使用起来十分方便,特别推荐。