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,这篇博客讲解十分详细,按照步骤即可实现二维码扫描功能!
如果大家的项目结构和上图中项目结构一样,就可以按照下面的步骤来实现扫描二维码的功能了,不一样的下面的步骤也可以提供一定的参考。
####################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,这篇博客讲解十分详细,按照步骤即可实现二维码扫描功能!
相关文章推荐
- phonegap的二维码扫描功能的实现
- IOS 对于ios7扫描二维码功能的实现
- 对于ios7扫描二维码功能的实现
- iOS之使用ZbarSDK实现扫描二维码以及条形码功能
- JAVA整合HTML5实现扫描二维码功能项目源码
- Android 二维码 扫描 保存 功能的实现
- Android开发实现模仿360二维码扫描功能实例详解
- iOS7自带扫描二维码、条形码功能实现
- [置顶] android开发之集成zxing,二维码,以及扫描二维码的功能实现。带源代码下载
- Android高级控件(三)—— 使用Google ZXing实现二维码的扫描和生成相关功能体系
- AVA整合HTML5实现扫描二维码功能项目源码
- swift 实现二维码扫描功能
- qt for ios扫描二维码功能实现
- iOS开发之扫描二维码功能的实现
- 实用知识:实现扫描二维码和条形码功能
- 若只支持IOS7 可用AVFouner 和系统自带API实现二维码扫描功能
- 随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的
- 使用ZbarSDK实现扫描二维码以及条形码功能(iOS)
- android开发之集成zxing,二维码,以及扫描二维码的功能实现。带源代码下载
- 关于扫描二维码下载app功能实现方法