1. 程式人生 > >phonegap的二維碼掃描功能的實現

phonegap的二維碼掃描功能的實現

    首先簡單的介紹下DOS環境下phonegap專案的結構,如下圖:


   如果大家的專案結構和上圖中專案結構一樣,就可以按照下面的步驟來實現掃描二維碼的功能了,不一樣的下面的步驟也可以提供一定的參考。

####################START######################

一、下載掃描二維碼的外掛

    網上大多給出的下載地址已經無用,http://download.csdn.net/detail/cs627565157/7882155,此連結是我上傳到CSDN上的免費資源,大家可以下載。下載解壓後的檔案如右圖所示:

該資料夾內部結構:

二、該外掛在專案中的使用

   1.在專案中的plugins資料夾下新建檔案:com.phonegap.plugins.barcodescanner,新建後的結構如下圖所示

    2.將下載解壓後的BarcodeScanner-master資料夾中的內容複製到上一步在plugins下新建的子資料夾com.phonegap.plugins.barcodescanner,複製後的效果如下圖:

      3.專案載入此外掛。

          將外掛複製到專案中並不代表專案就能使用此外掛,還需要使用cordova命令載入此外掛。cd到專案所在資料夾,然後使用命令:

cordova plugin add com.phonegap.plugins.barcodescanner載入此外掛,效果如下圖:

   4.在config.xml和AndroidManifest.xml檔案中配置此外掛

      在config.xml中加入

     <feature name="BarcodeScanner">
      <param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner"/>
    </feature>

    在AndroidManifest.xml中加入:

<activity
                android:name="com.google.zxing.client.android.CaptureActivity"
                android:screenOrientation="landscape"
                android:clearTaskOnLaunch="true"
                android:configChanges="orientation|keyboardHidden"
                android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
                android:windowSoftInputMode="stateAlwaysHidden"
                android:exported="false">
                <intent-filter>
                    <action android:name="com.phonegap.plugins.barcodescanner.SCAN"/>
                    <category android:name="android.intent.category.DEFAULT"/>
                </intent-filter>
            </activity>
            <activity android:name="com.google.zxing.client.android.encode.EncodeActivity" android:label="@string/share_name">
                <intent-filter>
                    <action android:name="com.phonegap.plugins.barcodescanner.ENCODE"/>
                    <category android:name="android.intent.category.DEFAULT"/>
                </intent-filter>
            </activity>
            <activity android:name="com.google.zxing.client.android.HelpActivity" android:label="@string/share_name">
                <intent-filter>
                    <action android:name="android.intent.action.VIEW"/>
                    <category android:name="android.intent.category.DEFAULT"/>
                </intent-filter>
            </activity>

        和:

       <uses-permission android:name="android.permission.CAMERA" />
       <uses-permission android:name="android.permission.FLASHLIGHT" />
       <uses-feature android:name="android.hardware.camera" android:required="false" />

  5.在專案中使用此外掛

       在專案中使用此外掛還需將barcodescanner.js檔案複製到專案中的www資料夾下,並在index.html中使用

<script type="text/javascript" charset="utf-8" src="barcodescanner.js"></script>語句進行引用

   此處需要注意的是所下載的外掛中包含的barcodescanner.js並不能使用,barcodescanner.js檔案需要我們自己寫,還好網上已有現成的JS程式碼。新建檔案barcodescanner.js檔案將下面的紅色字型的程式碼複製到barcodescanner.js檔案中然後將barcodescanner.js複製到你專案中的www資料夾下即可

barcodescanner.js程式碼如下:

/** 
 * cordova is available under *either* the terms of the modified BSD license *or* the 
 * MIT License (2008). See http://opensource.org/licenses/alphabetical for full text. 
 * 
 * Copyright (c) Matt Kane 2010 
 * Copyright (c) 2011, IBM Corporation 
 */  
  
cordova.define("cordova/plugins/barcodescanner",   
  function(require, exports, module) {  
    var exec = require("cordova/exec");  
    var BarcodeScanner = function() {};  
      
    //-------------------------------------------------------------------  
    BarcodeScanner.prototype.scan = function(successCallback, errorCallback) {  
        if (errorCallback == null) { errorCallback = function() {}}  
      
        if (typeof errorCallback != "function")  {  
            console.log("BarcodeScanner.scan failure: failure parameter not a function");  
            return  
        }  
      
        if (typeof successCallback != "function") {  
            console.log("BarcodeScanner.scan failure: success callback parameter must be a function");  
            return  
        }  
      
        exec(successCallback, errorCallback, 'BarcodeScanner', 'scan', []);  
    };  
      
    //-------------------------------------------------------------------  
    BarcodeScanner.prototype.encode = function(type, data, successCallback, errorCallback, options) {  
        if (errorCallback == null) { errorCallback = function() {}}  
      
        if (typeof errorCallback != "function")  {  
            console.log("BarcodeScanner.scan failure: failure parameter not a function");  
            return  
        }  
      
        if (typeof successCallback != "function") {  
            console.log("BarcodeScanner.scan failure: success callback parameter must be a function");  
            return  
        }  
      
        exec(successCallback, errorCallback, 'BarcodeScanner', 'encode', [{"type": type, "data": data, "options": options}]);  
    };  
      
    var barcodeScanner = new BarcodeScanner();  
    module.exports = barcodeScanner;  
  
});  
  
cordova.define("cordova/plugin/BarcodeConstants",   
    function(require, exports, module) {  
    module.exports = {  
        Encode:{  
            TEXT_TYPE: "TEXT_TYPE",  
            EMAIL_TYPE: "EMAIL_TYPE",  
            PHONE_TYPE: "PHONE_TYPE",  
            SMS_TYPE: "SMS_TYPE",  
        }  
    };          
});  
//-------------------------------------------------------------------  
var BarcodeScanner = cordova.require('cordova/plugin/BarcodeConstants');  
  
if(!window.plugins) {  
    window.plugins = {};  
}  
if (!window.plugins.barcodeScanner) {  
    window.plugins.barcodeScanner = cordova.require("cordova/plugins/barcodescanner");  
}  

---------------------------------------------------------

在專案中使用此外掛使用onclick事件呼叫下面的JS程式碼即可

function scanner()
    {
       alert("開始掃描");
      window.plugins.barcodeScanner.scan(  
        function(result) {  
        alert("Scanned Code: " + result.text   
                + ". Format: " + result.format  
                + ". Cancelled: " + result.cancelled);  
    }, function(error) {  
        alert("Scan failed: " + error);  
    });  
       alert("掃描結束!");
    }

三、 小結

     1.由於本人技術有限,以上掃描二維碼外掛的過程僅限於和我貼出的專案結構相同的專案。

     2.若要在android的phonegap中實現二維碼的掃描功能給搭建推薦一篇部落格http://blog.csdn.net/u014646984/article/details/25655725,這篇部落格講解十分詳細,按照步驟即可實現二維碼掃描功能!

相關推薦

html5掃描功能實現

html5中可以使用二維碼掃描,也可以從相簿中選擇二維碼識別,程式碼如下 var ws = null, wo = null; var scan = null, domr

Android中Webview與原生介面互動及掃描功能實現

最近專案中有一個新的需求,大致是這樣的:APP中通過WebView展示一個第三方的HTML5介面,使用者可以在HTML5介面中呼叫Android攝像頭進行二維碼掃描,並將掃描結果顯示在HTML5介面。這顯然涉及到了Android原生與WebView之前的傳值

phonegap掃描功能實現

    首先簡單的介紹下DOS環境下phonegap專案的結構,如下圖:    如果大家的專案結構和上圖中專案結構一樣,就可以按照下面的步驟來實現掃描二維碼的功能了,不一樣的下面的步驟也可以提供一定的參考。 ####################START#######

Android實現掃描功能(三)-閃光燈控制

簡介 本篇我們對光線暗淡情況下閃光燈的使用做出介紹。 效果 晚上測試時: 開燈後: 未開燈: 實現步驟 1、在activity_scanner.xml介面上加上閃光燈開關按鈕。可以是Button、Checkbox等控制元件。

Android開發之Zbar實現掃描功能

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

Android 基於zxing的掃描功能的簡單實現及優化

由於專案中需要接入一下簡單的二維碼掃描功能,最終使用 zxing 來實現,把官方例子中的部分程式碼摘除出來做了簡單的封裝,並進行了一些優化。這裡簡單做一個記錄。 掃描二維碼 Android 中關於二維碼掃描的庫有很多,但是歸根到底無外乎下面這幾種

Android實現掃描功能)-ZXing個性化與近距離識別優化

簡介 本篇我們對掃碼介面進行優化,並對ZXing近距離無法識別的問題做出優化。 個性化定製 每個APP都有自己的表現形式,實現個性化掃碼介面定製,主要有兩個地方: activity_scanner.xml介面檔案 com.google.zxin

基於MUI框架的使用HTML5+實現掃描功能並且其結果在webview中的資訊的傳遞

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=d

ios-實現掃描功能

在此就簡單的介紹下二維碼掃描功能的實現把 首先先說下思路,我們需要去配置的就是   1、輸入裝置(用來獲取外界資訊),輸入裝置有攝像頭、麥克風、鍵盤   2、輸出裝置(將收集到的資訊進行解析去獲取收到的內容)   3、會話的session(用來連線輸入和輸出的裝置),不然的

基於MUI框架的使用HTML5+實現掃描功能

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=devi

iOS使用ZBar實現掃描以及實現識別相簿中圖片功能

使用zbar呼叫相機掃碼程式碼: //開啟相機 - (void) init_camera { self.navigationController.navigationBarHidden=YES;     [commonaddNavigationAddToView:

Android 開發功能實現(四)------基於Zxing實現編碼功能(生成,一等)

Android 二維碼開發功能實現(四)------基於Zxing實現編碼功能(生成二維碼,一維碼等) 前言 關於Google的開源庫Zxing,前面也寫了幾遍文章進行介紹.我們先簡單的回顧一下! Android 二維碼的掃碼功能實現(一) 這篇文章主要介紹了,Zxi

Android之在Fragment中使用掃描功能

最近在做一個專案,是在Fragment中使用zxing的二維碼掃描功能,在我以前寫的二維碼掃描功能的教程只適合在activity中使用地址:https://blog.csdn.net/qq_31844349/article/details/81301911 沒有辦法因為工作需要,必須在Fra

H5+ 掃描功能

二維碼在生活中的使用越來越廣泛,APP開發中,也越來越多的需求需要用到二維碼的掃描功能,以下就針對h5+的二維碼掃描功能做一些簡單的介紹; 1. var bc = new plus.barc

Android 開發功能實現(五)-----對zxing進行優化,提高掃速度與精確度

對zxing進行優化的思考 前言 對於Google 的開源框架Zxing庫的使用介紹,前面也通過幾篇文章進行解讀. Android 二維碼的掃碼功能實現(一) Android 基於Zxing的掃碼功能實現(二) Android 基於Zxing掃碼實現(三)

Android開發中的掃描功能

Android開發中的二維碼掃描 現在Android開發中使用二維碼掃描功能越來越多,本篇部落格具體講一下其使用方法: 新增依賴 在自己的Activity或者Fragment中使用新增關於掃描的連結 新增二維碼掃描的相關Activity 對掃描資料進

Android Zxing實現掃描條形碼功能仿微信整合閃光燈生成

最近在做android專案需要用到二維碼條形碼掃描功能,我用的是Eclipse網上原始碼大多是GitHup上的Android studio版本的所以我改了一版整合到專案中去。 效果圖: 左邊版本的掃碼框是自定義的。右邊版本的掃碼框和掃描線是圖片因為太醜所以最終換成左邊

sencha-touch下藉助phoneGap實現拍照,功能

1.配置 在android專案中拷入相應的檔案,layout+raw+values+xml AndroidMainfest.xml中註冊  <activity android:name="com.Plugin.scan.CaptureActivity" android

Android 基於google Zxing實現 條形碼掃描,仿微信掃描效果

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

實現掃描

首先app頁面 public class MyApp extends Application{ @Override public void onCreate() { super.onCreate(); ZXingL