Ionic开发之条形码扫描
来源:互联网 发布:java高并发书 编辑:程序博客网 时间:2024/06/02 00:59
http://blog.csdn.net/lissdy/article/details/45843819
原文中
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
改为
cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git
最近项目开发中有扫描条码的需求,查阅一些资料之后发现ngCordova扩展了cordova的插件–BarcodeScanner,提供了以下格式的条码扫描。
QR CodeData MatrixUPC EUPC AEAN 8EAN 13Code 128Code 39ITF
完美的支持所有格式,插件本身使用流行的库ZXing。
将条码扫描器整合进Android和ios应用的步骤如下:
1、新建项目
ionic start IonicProject blankcd IonicProjectionic platform add androidionic platform add ios
如果没有使用mac开发,就不要纠结ios平台咯。
2、添加条码扫描插件
cordova plugin add https://github.com/phonegap/phonegap-plugin-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目录。
在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>
测试:
至此,我们已经完成了一个简单的条形码扫描应用。
demo code source
原文:
Implement A Barcode Scanner Using Ionic Framework
- Ionic开发之条形码扫描
- Ionic开发之条形码扫描
- IOS开发(91)之ZBar 条形码二维码扫描控件
- Android 条形码、二维码扫描开发总结
- 跨平台开发框架Ionic学习之路------3(使用barcodescanner扫描)
- IOS开发UI进阶篇 — 原生二维码、条形码扫描
- iOS开发--二维码/条形码(扫描(可区域)和生成)
- IOS之ZBar条形码扫描失败---坑爹的问题
- 条形码扫描示例程序
- 条形码扫描示例程序
- Android扫描条形码实现
- zxing扫描条形码 ios
- ios条形码扫描
- 条形码,二维码扫描
- zxing扫描条形码 ios
- 条形码,二维码扫描
- C#编写条形码扫描
- iOS 二维码,条形码扫描
- android RxJava+Retrofit2.0 OkHttp添加日志拦截器和设置请求头
- Window管理右键菜单
- 快速破解哈希密文findmyhash
- Android中获取屏幕的宽和高
- React-Native (iOS)环境的配置
- Ionic开发之条形码扫描
- Android中解决ListView嵌套Viewpager时,滑动事件冲突的方法
- HashMap源码的解读-为何存取的性能很高的一个重要点
- Excel键盘快捷键大全(二)
- Android 6.0权限管理,sdk>=23的请求权限
- 数组排序(区分大小写)
- CentOS6.5配置网络yum源
- Excel键盘快捷键大全(三)
- 富文本 QTextDocument 解析及相关