Ionic开发之条形码扫描

最近项目开发中有扫描条码的需求,查阅一些资料之后发现ngCordova扩展了cordova的插件–BarcodeScanner,提供了以下格式的条码扫描。

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

完美的支持所有格式,插件本身使用流行的库ZXing。

将条码扫描器整合进AndroidiOS应用的步骤如下:

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目录。 
 
在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

时间: 2024-11-05 19:02:08

Ionic开发之条形码扫描的相关文章

Swift语言编写一个简单的条形码扫描APP

swift语言编写一个简单的条形码扫描APP 原文地址:appcoda 在处理职员在杂货店的收银台排了很长的队伍,在机场帮助检查背包和旅客,或者在主要的食品供应商,协助处理乏味的存货清单过程,条形码扫描是很简单的处理工具.实际上,他们已经用了这个办法来解决消费者在智能购物,图书分类,等其他目的.因此,让我们来制作一个iPhone版本的条形码扫描工具吧! 对我们来说幸运的是,苹果已经制作了条形码扫描的程序,实现它是一件很简单的事情.我们将要研究进入AV Foundation框架的世界,组建APP,

关于iOS原生条形码扫描,你需要注意的两三事

转自txx's blog ? 前言 这篇文章是我们在新发布的礼物说的iOS端开发过程中遇到的一些关于条形码的问题总结而来. ? 本文记录的问题是:当AVFoundation使用多译码器扫描的时候.二维码是秒杀,但是条形码却经常扫不上.如果去掉二维码的话,条形码扫描又秒杀的问题. ? 为什么我们没有选用ZXing而是用AVfoundation呢,是因为我说服了老板,iOS7开发,而不再去兼容iOS5/6.所以我们终于可以抛弃效率低下的ZXing,而选择AVFoundation.为什么说ZXing效

Ionic开发实战

折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此篇文章留作记录. 当初想着因为项目不大人力足够的并且因为团队没有移动开发经验的情况下,是不是能够是用hybrid app来代替原生来完成这个项目,经过一些技术调研之后选择了Ionic.当时是对Ionic一无所知,凭借一些盲目的自信,想着方正有开发文档能有什么问题呢.现在想想都觉得当时有点冲动万一中间出现什么坑或者无法解决的问题都找不到可以咨询的人.不过好歹结果是好的,基本实现了当初需求设计,并且效果还不错. 因为Ion

Ionic开发环境搭建

Ionic是基于web技术开发移动应用的跨平台框架,可开发手机web.Ios.Android应用程序. 1.Ionic环境安装 Ionic开发依赖于Node.js环境,因此需要先安装Node.js,在Node.js环境下执行命令: npm install -g cordova ionic npm是一个包管理器,这里使用npm安装cordova和ionic,-g表示全局安装,全局安装后在任何目录下都可以使用cordova和ionic命令. Cordova提供了一组设备相关的API,通过这组API,

[ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP

前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 项目介绍 本项目基于移动跨平台开发框架 Ionic 开发,主要包含健康.医疗.生活.农业.和用户五大模块,以下是功能架构图. 目录 第1讲 前言,技术储备,环境搭建,常用命令 第2讲 新建项目,架构页面,配置app.js和controllers.js 第3讲 使用Tabs和SlideBox实现左右滑动菜单 第4讲 第4讲 通过Service层获取新

使用Java开发多线程端口扫描工具(二)

一 介绍 这一篇文章是紧接着上一篇文章(http://www.zifangsky.cn/2015/12/使用java开发多线程端口扫描工具/)写的,端口扫描的原理不用多少,我在上一篇文章中已经说过了,至于目的大家都懂得.在这一篇文章里,我主要是对端口扫描工具的继续完善,以及写出一个比较直观的图形界面出来,以方便我们测试使用.界面如下: 这个工具主要是实现了以下几点功能:(1)两种扫描方式,一种是只扫描常见端口,另一种是设置一个起始和结束端口,依次探测.当然,原理很简单,用for循环就可以了:(2

ios条形码扫描技术

iOS 应用里实现条形码扫描功能,有个免费开源的 SDK:ZBar(http://zbar.sourceforge.net/iphone/sdkdoc/install.html)下面是实现的效果: 利用条形码,可以简单的得到二维码的值.具体的实现过程如下: 下载 ZBar 的 SDK 创建工程,iphone.scanbar 把下载的 ZBarSDK 添加到工程中 添加 .framework 到工程中 添加一个按钮,处理效果. #pragma mark –    #pragma mark onCl

Ionic开发Hybrid App问题总结

http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_build_hybrid_app_with_ionic.html 作者:Parry 出处:http://www.cnblogs.com/parry/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 此篇文章主要整理了最近在

分分钟接入条形码扫描模块

????最近在github上发现一个比较好的条形码二维码扫描器项目,其中的条形码扫描器经我多次实践测试,其兼容性.识别率.识别速度都非常优秀.我对其进行一定的改进,使我们能够很方便迅速地在项目中接入条形码扫描模块,此处是项目地址. ????首先将"zbar"这个库项目添加进自己的项目中,然后新建一个用来扫描条形码的Activity如下: package barcodescanner.zbar.sample; import android.app.Activity; import and