Ionic開發之條形碼掃描

阿新 • • 發佈：2019-01-21

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 Code
Data Matrix
UPC E
UPC A
EAN 8
EAN 13
Code 128
Code 39
ITF

完美的支援所有格式，外掛本身使用流行的庫ZXing。

將條碼掃描器整合進Android和ios應用的步驟如下：

1、新建專案

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic 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>

測試：
這裡寫圖片描述

這裡寫圖片描述

至此，我們已經完成了一個簡單的條形碼掃描應用。

Ionic開發之條形碼掃描

http://blog.csdn.net/lissdy/article/details/45843819 原文中 cordova plugin add https://github.com/wildabeast/BarcodeScanner.git 改為

ionic開發之攝像頭（camera）的呼叫

最近專案中遇到了需要呼叫攝像頭的地方，之前一直沒有弄好，因為真機執行出現了問題，今天真機執行解決了，使得我怕不急待想試驗一下攝像頭能否調取成功。要在ionic中呼叫camera功能，分

ionic開發之使用者頭像修改-圖片選擇與上傳

使用者頭像修改，圖片選擇上傳，非常常用的功能，本來打算和wap版一樣，也用XMLHttpRequest和FormData來處理圖片非同步上傳，結果在手機上測試的時候發現，onload事件沒有觸發，沒找

跨平臺開發框架Ionic學習之路------3(使用barcodescanner掃描)

今天使用ionic實現的一個條碼掃描的小demo,方便自己以後備用。 1、依賴的庫檔案:barcodescanner外掛與ngCordova.js檔案 2、步驟如下: ionic start ionicBarcode blank cd ionicBarcode ionic

高效Web前端開發之路：YUI 3.15 PDF掃描版

瀏覽器瀏覽器兼容 key 掃描 data- 第6章必須第5章 HR JavaScript是一種最初由Netscape的LiveScript發展而來的面向對象的Web腳本語言，被ECMA國際定義為國際化標準——ECMAScript。JavaScript具有使用局限

Ionic—二維碼掃描與關於模組的開發

一.二維碼掃描功能佈局開發 1.開發設計功能需求：佈局二維碼掃描頁面二維碼掃描在Ionic Native中為QS Scanner外掛，安裝如下 sudo ionic cordova plugin add cordova-plugin-qrsc

[HTML5之APP實戰]基於ionic開發的一款KTV移動應用

摘要前期一直介紹web 移動開發的一些基本知識,而沒有給大家演示過一個專案,今天給大家給大家詳細介紹一下如何利用HTML5來完成一個移動APP應用.在正式介紹前,希望大家能搞明白以下幾個問題. 請大家思考以下幾個問題? 問題一 H

Android開發之Zbar實現二維碼掃描功能

前言：在寫這篇文章之前已經寫過兩篇關於二維碼功能的文章，有興趣的可以看看——》文章1：Android開發之利用ZXing庫實現二維碼的掃描；文章2：Android開發之利用ZXing庫實現二維碼的生成，這兩篇文章中使用到的二維碼生成庫是ZXing，在本篇

ionic學習之掃描二維碼cordova-plugin-cszbar

掃描二維碼外掛：cordova-plugin-cszbar 新增外掛： cordova plugin add cordova-plugin-cszbar 不多BB直接上程式碼 $scope.isScanning = false; $scope.scanStar

Ionic 跨平臺開發之打包上線

一、iOS打包對於iOS開發者而言，iOS端的打包比較容易，具體步驟如下： 1，保證程式碼能夠正常的執行之後，新增iOS平臺（依次執行ionic platform rm ios和ionic

高仿仿微信介面二維碼掃描效果之 Android 基於google Zxing實現二維碼、條形碼掃描

絕大多數android開發者都是使用google Zxing來實現二維碼、條形碼掃描，但官方和網上很多demo的掃描介面讓人不忍直視，今天我也做了一個，介面和執行效都是高仿微信最新版的掃描效果，執行效果圖如下：主要是修改了ViewfindView類，我就不多解

Android開發之藍芽(Bluetooth)操作(二)--修改本機藍芽裝置的可見性,並掃描周圍可用的藍芽裝置

一. 修改本機藍芽裝置的可見性二. 掃描周圍可用的藍芽裝置 Eg: 一. 清單檔案AdroidManifest.xml: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=

android開發之掃描二維碼實現網頁登入

匯入BarCodeLibrary到Eclipse當中在Eclipse當中建立新專案並依賴於BarCodeLibrary類庫 Code: MainActivity.java public class MainActivity extends Activity implements OnClickLis

Android(Java)開發之獲取BLE廣播包（掃描後獲取：廣播資料+掃描應答資料+RSSI）

一、安卓BLE的廣播包資料從哪獲取？通常，安卓APP讀寫BLE裝置的資料都是建立連線後通過GATT獲取或修改。但是，BLE裝置向外廣播時本身會攜帶一部分有用資訊，如將感測資料存放到廣播包的自定義資料段，最近接觸的一個iBeacon/EddyStone整合專案便是類似，因此

ionic開發介紹之SASS介紹

本文只是簡單的簡紹。適用於剛剛開發ionic專案的同學學習瞭解 Sass的作用以及在本工程裡使用的細節，，需要gulpfile.js那些命令支援，以及編碼 Ionic框架使用了sass來定義自己的css機構，當然我們自定義的css檔案也使用sass。因此涉及到sass編

Ionic 跨平臺開發之Cordova外掛清單及使用說明

一，外掛相關常用命令1，檢視所有已經安裝的外掛 cordova plugin ls2，安裝外掛（以camera外掛為例） cordova plugin add cordova-plugin-camera3，刪除外掛（以camera外掛為例） cordov

微信公眾平臺開發之萬能表單

平臺體驗 src .net 等等 art net 獎勵功能微信公眾平臺開發之萬能表單是為了方便我們得到用戶的信息。我們能夠在後臺設置不論什麽須要用戶填寫的信息，比方：電話，姓名，性別，工作等等信息，當然我們也能夠設置一定的獎勵，僅僅要完好這些信息就能夠得到一定

ios開發之 -- invalid nib registered for identifier

層級關系註意刪除出現 ide 提示 sta tab 後來今天在寫代碼的時候，碰到這麼一個問題： invalid nib registered for identifier (重用符) - nib must contain exactly one top level

移動web開發之像素和DPR

javascript element 英語單詞計算機 web開發定義　　像素，又稱畫素，是圖像顯示的基本單位，譯自英文“pixel”，pix是英語單詞picture的常用簡寫，加上英語單詞“元素”element，就得到pixel，故“像素”表示“圖像元素”之意，有時亦被稱為pel(pi

iOS開發之視頻根據url獲取第一幀圖片,獲取任一幀圖片

keyword rac onerror 根據 ati parameter all ger mage + (UIImage*) thumbnailImageForVideo:(NSURL *)videoURL atTime:(NSTimeInterval)time { AV

Ionic開發之條形碼掃描

相關推薦