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

最新推荐文章于 2019-07-09 22:00:32 发布

原创最新推荐文章于 2019-07-09 22:00:32 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #phonegap #二维码

phonegap移动开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在DOS环境下PhoneGap项目中实现二维码扫描功能。首先，通过下载并添加特定的二维码扫描插件到项目结构中，接着使用cordova命令加载插件，并在config.xml和AndroidManifest.xml中配置。然后，编写barcodescanner.js文件并将其引入到项目中。最后，在项目中使用onclick事件调用JS代码进行扫描操作。提供了详细步骤和参考资料。

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

首先简单的介绍下DOS环境下phonegap项目的结构，如下图：

如果大家的项目结构和上图中项目结构一样，就可以按照下面的步骤来实现扫描二维码的功能了，不一样的下面的步骤也可以提供一定的参考。

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

一、下载扫描二维码的插件

网上大多给出的下载地址已经无用，http://download.youkuaiyun.com/detail/cs627565157/7882155，此链接是我上传到优快云上的免费资源，大家可以下载。下载解压后的文件如右图所示：

该文件夹内部结构：

二、该插件在项目中的使用

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中加入

在AndroidManifest.xml中加入：

和：

<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中使用

此处需要注意的是所下载的插件中包含的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");
}