ionic 组件之二维码扫描

本文介绍如何利用开源软件PhoneGap和其提供的插件实现二维码、条形码等扫描功能,包括安装步骤、类库使用及示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

一、简介

开源软件 https://github.com/phonegap/phonegap-plugin-barcodescanner 可以支持各种类型的扫描,包括二维码等等……

  • QR Code

  • Data Matrix

  • UPC E

  • UPC A

  • EAN 8

  • EAN 13

  • Code 128

  • Code 39

  • ITF

插件内部使用类库 https://github.com/zxing/zxing 

二、安装插件

 

首先准备项目:

ionic start IonicProject blank

cd IonicProject

ionic platform add android

ionic platform add ios

1、安装插件

This requires phonegap 5.0+ ( current stable v3.0.0 )

phonegap plugin add phonegap-plugin-barcodescanner

Older versions of phonegap can still install via the deprecated id ( stale v2.0.1 )

phonegap plugin add com.phonegap.plugins.barcodescanner

It is also possible to install via repo url directly ( unstable )

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

 

2、下载 ng-cordova 相应 js

下载 https://github.com/driftyco/ng-cordova/releases 

将其中的 ng-cordova.min.js 拷贝到项目的 www/js 目录

修改 index.html 代码

<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>

三、使用类库

 

1、修改 app.js

angular.module('starter', ['ionic', 'ngCordova'])

2、使用扫描功能

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

});

};

 

});

转载于:https://www.cnblogs.com/hugofgh/p/5053478.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值