您的位置:首页 > Web前端 > Node.js

phonegap的二维码扫描功能的实现

2014-09-09 09:39 537 查看
    首先简单的介绍下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',
4000
[{"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,这篇博客讲解十分详细,按照步骤即可实现二维码扫描功能!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  node.js phonegap 二维码