`

phonegap3.X整合二维码扫描功能(BarcodeScanner)

阅读更多

本文属于http://zjfhw.iteye.com原创,转载请注明出处。

 

不得不说,phonegap的版本变更,架构变更让人很头疼。

下面记录下我在phonegap3.4下整合二维码插件BarcodeScanner的过程:

 

 

 

1 phonegap的安装/环境搭建

3.x的phonegap 是采用 nodejs+git+ant方式进行安装的(非常无语,看似智能化,几条命令就可以完成,实际上...)。关于phonegap的环境搭建,这里有一篇比较详细的文章:http://www.vmeitime.com/post/2013-08-14/phonegap3install

 

2.BarcodeScanner下载安装

网上很多帖子的下载地址都已经失效了,貌似整个phonegap插件在github上面迁移了,针对phonegap3.x的BarcodeScanner的github地址:https://github.com/wildabeast/BarcodeScanner

 

点击右边的下载按钮,打包下载。

 

         

 

         

3.Android环境下搭建示例

3.1 将barcodeScanner 的libary工程引入(这个CaptureActivity工程在本文附件中,也可以在barcodeScanner 的github中下载,目录:BarcodeScanner/src/android/LibraryProject)

注:在github中下载的不知什么原因导不进eclipse,提示非android工程


 

将barcodeScanner的jar包引入,目录:BarcodeScanner/src/android/com.google.zxing.client.android.captureactivity.jar

(但是这里的core.jar 里面把com.google.zxing.client.android这个包删了,因为和barcodeScanner 的libary工程有重复的class,部署时报错,core.jar也在本文附件的libs中


 

 

 

注意一点:在项目的build path的Order and Export页签中将这个libraries包勾选并放到第一位

 



 

 

 

 

3.2 将BarcodeScanner.java这个文件放入工程,这个是phonegap插件类。在BarcodeScanner下载包的src\android\com\phonegap\plugins\barcodescanner目录下。

 

3.3 将barcodescanner.js放入工程,在BarcodeScanner下载包的www目录下。

建议将其放在与cordova.js文件同一级。

 

3.4 利用phonegap插件机制将BarcodeScanner整合进工程。

 

3.4.1 res/xml/config.xml文件加入插件

 

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

 

 

 

 

       3.4.2 AndroidManifest.xml中</application>结束之前加入下列节点

 

<!-- ZXing activities -->
        <activity
            android:name="com.google.zxing.client.android.CaptureActivity"
            android:configChanges="orientation|keyboardHidden"
            android:exported="true"
            android:screenOrientation="landscape"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
            android:windowSoftInputMode="stateAlwaysHidden" >
            <intent-filter>
                <action android:name="com.google.zxing.client.android.SCAN" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.google.zxing.client.android.encode.EncodeActivity"
            android:label="扫描" 
            android:exported="true">
            <intent-filter>
                <action android:name="com.phonegap.plugins.barcodescanner.BarcodeScanner.ENCODE" />

                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.google.zxing.client.android.HelpActivity"
            android:label="扫描"
            android:exported="true" >
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

 

 

      3.4.3 cordova_plugins.js 注册上BarcodeScanner插件便于前端js调用。

(这一部分看看就可以了,实际上笔者按照这个做没成功,后面用了另外的处理)

注:Phonegap3.x的插件安装方式已经有了很大的不同,BarcodeScanner需要安装plugman这个玩意儿来。这种安装方式可以参考https://github.com/wildabeast/BarcodeScanner/tree/master/src/android,里面的文档描述得不大清楚,而且它提供的命令有点不知所云。所以笔者是手动注册的,具体方法就是先参考phonegap3.x的标准插件安装文档:

添加插件(需要先安装git工具 https://help.github.com/articles/set-up-git):
例如在 cordova 中添加插件的方法是:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
而通过 phonegap 命令行工具的方法是:
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
这意味着在开始 PhoneGap 项目时你要先考虑项目需要什么功能,然后通过命令行来添加这些功能。
1). 添加的插件都将放在C:\hello\plugins目录下.
2). 同时会在所有平台下的config.xml文件中增加feature插件配置,如:C:\hello\platforms\<平台>\res\xml\config.xml)
3). 增加相应的插件java文件:C:\hello\platforms\android\src
4). 增加相应的插件js文件:C:\hello\platforms\android\assets\www\plugins
下面是完整的插件列表,我直接拷贝过来,可能会有变化:
Basic device information (Device API):
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
Network Connection and Battery Events:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
Accelerometer, Compass, and Geolocation:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
Camera, Media playback and Capture:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
Access files on device or network (File API):
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
Notification via dialog box or vibration:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
Contacts:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
Globalization:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
Splashscreen:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
Open new browser windows (InAppBrowser):
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
Debug console:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

查看当前已安装的插件: $ phonegap local plugin list
删除指定的插件: $ phonegap local plugin remove org.apache.cordova.core.console

 

 

 随便用命令安装一个插件,比如:Camera。然后对照变化,去手动地改工程的配置。

用命令安装一下插件后可以发现,需要更改的配置有:

1.\res\xml\config.xml:新增了<feature>节点

类似这样的结构:

 

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

 

 

2.platforms\android\assets\www 用Nodejs生成的phonegap项目中这个目录下的cordova_plugins.js新增了这样的数据:




 

但是笔者在搭建过程中地修改了上述这些文件,手动添加了BarcodeScanner插件,最后依然是调用不了的,BarcodeScanner插件的文档是这么说的:



 

但是实际调用时,报错:cordova.plugins.barcodeScanner.scan 说这个barcodeScanner没有scan这个函数,用chrome debug进去,发现是说 require 这个函数是 undefind 。



 

笔者跟进barcodescanner.js,发现改成var exec = cordova.require("cordova/exec"); 这个错误便消失了。

但是随之而来的又是另外各种 函数不存在的问题........

 

3.4.4 换思路,放弃了上面这种插件加载的方法(不使用cordova_plugins.js去注册了,在自己的页面里面手动地引入barcodescanner.js

 

接下来:

 

barcodescanner.js 第一句改成:var exec = cordova.require("cordova/exec");

 

然后再最下面写一个函数:

 

function scanForCodeBar(targetInputName){
		  var barcodeScanner = new BarcodeScanner();
		  barcodeScanner.scan(
			  function (result) {
				  /*alert("We got a barcode\n" +
						"Result: " + result.text + "\n" +
						"Format: " + result.format + "\n" +
						"Cancelled: " + result.cancelled);
				*/
				var code = result.text;
				$("input[name='"+targetInputName+"']").val(code);
			  }, 
			  function (error) {
				  alert("扫描失败: " + error);
			  }
		   );
}

 

 

在实际设备上运行,还是报错(此时已经成功地执行到了BarcodeScanner.java里面的scan方法):

 

这个错误是在启动 BarcodeScanner的Activity时的错误。

 

笔者试了半天,解决方法如下:

 

看到BarcodeScanner.java的这句


 

 改成:



 

到这里终于能使用 BarcodeScanner 的扫描功能了。

 

调用方法:

<input class="Thenumtext" name="Col_003" type="text" onclick="scanForCodeBar('Col_003')"/>

 

在点击这个input后会跳转到BarcodeScanner 的扫描界面,当扫描到内容后,会将结果回填到 Col_003这个input中去,具体怎么用这个返回结果 可以参考前面写的barcodescanner.js scanForCodeBar 函数

 

  • 大小: 45.1 KB
  • 大小: 2.9 KB
  • 大小: 15.3 KB
  • 大小: 4.3 KB
  • 大小: 7.9 KB
  • 大小: 4.3 KB
  • 大小: 79.8 KB
  • 大小: 67 KB
  • 大小: 175.2 KB
  • 大小: 8.9 KB
  • 大小: 8.4 KB
  • 大小: 11.1 KB
  • 大小: 29.1 KB
  • 大小: 15.3 KB
分享到:
评论
6 楼 morning424 2015-09-15  
hello,摄像头一直不出,调用之后直接出alert("We got a barcode\n" +
                        "Result: " + result.text + "\n" +
                        "Format: " + result.format + "\n" +
                        "Cancelled: " + result.cancelled);
result.cancelled这个是true状态。不知道哪里没做好。
5 楼 fenixhua 2014-04-21  
j夫子 写道
fenixhua 写道
照着做了 但是为什么只有canceled是返回结果的,text和format都是undefined, 求破。。

canceled 得到的是什么?

得到的是true或者false 能加一下qq么 39596068 不甚感激~
4 楼 j夫子 2014-04-21  
fenixhua 写道
照着做了 但是为什么只有canceled是返回结果的,text和format都是undefined, 求破。。

canceled 得到的是什么?
3 楼 fenixhua 2014-04-20  
照着做了 但是为什么只有canceled是返回结果的,text和format都是undefined, 求破。。
2 楼 j夫子 2014-04-12  
a393020220 写道
这个必须要安装扫描器才能用吗。

是的 但是这个是将条码扫描器的应用嵌入到自己的应用里
1 楼 a393020220 2014-04-12  
这个必须要安装扫描器才能用吗。

相关推荐

    PhoneGap 3.x Mobile Application Development Hotshot.2014.pdf

    ### PhoneGap 3.x Mobile Application Development Key Knowledge Points #### Overview **PhoneGap 3.x Mobile Application Development Hotshot.2014.pdf** is a comprehensive guide designed to help ...

    二、phoneGap项目中使用二维码扫描功能

    PhoneGap项目中集成二维码扫描功能是一项常见的需求,特别是在开发跨平台移动应用时。PhoneGap,现称为Cordova,是一个开放源代码的框架,允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。本篇将详细介绍...

    Phonegap二维码扫描

    在PhoneGap项目中,实现二维码扫描通常需要依赖第三方库,例如ZXing(Zebra Crossing)或者插件如phonegap-plugin-barcodescanner。这些库或插件提供了JavaScript接口,使得Web代码能够调用设备的摄像头并解析扫描...

    phoneGAP2.9.1.zip

    PhoneGap的核心思想是将Web应用包装在原生的移动应用壳中,使得这些Web应用能够访问设备的功能,如摄像头、GPS、加速度计等,而无需编写原生代码。这个框架由Adobe公司维护,并且遵循Apache许可证。 在"phoneGAP...

    phonegap-iphone条码二维码扫描插件

    本知识点主要聚焦于PhoneGap在iPhone上实现条码和二维码扫描功能的插件——BarcodeScanner。 一、PhoneGap与 BarcodeScanner 插件 PhoneGap的精髓在于它提供了一个桥梁,让Web开发者可以使用已有的前端技术创建出...

    cordova二维码扫描插件

    总的来说,"Cordova二维码扫描插件"是一个高效、易用的解决方案,对于需要在Ionic、PhoneGap或其他基于Cordova的混合APP中实现二维码扫描功能的开发者来说,是一个理想的选择。它的出色设计和广泛兼容性使得开发者...

    cordova扫码插件phonegap-plugin-barcodescanner,修复了在ios10上面的内存泄漏导致的闪退bug

    在这个场景中,我们关注的是一个名为`phonegap-plugin-barcodescanner`的插件,这是一个专门为PhoneGap/Cordova设计的扫码功能插件。 这个插件的主要作用是在iOS和Android等平台上实现条形码和二维码的扫描功能。...

    PhoneGap+javascript+html5 扫描二维码

    标题提到的"PhoneGap+javascript+html5 扫描二维码"是指利用PhoneGap框架,结合JavaScript和HTML5的特性来实现二维码扫描功能。在移动应用中,二维码扫描是非常实用的功能,可以用于快速数据交换、链接跳转、会员...

    cordova barcodescanner 仿微信样式并支持从相册选取

    1. 首先通过cordova 命令安装二维码扫描插件 cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git 2. 安装完插件后将二维码的lib包替换为zxing.lib,jar包在我上传的demo里面有。 3....

    phonegap扫描二维码插件

    phonegap扫描二位码插件,顺便给大家推荐phonegap扫描二维码的教程http://blog.csdn.net/u014646984/article/details/25655725,这篇博客写得比较详细,按照步骤可以搭建出扫描二维码的android程序

    .PhoneGap.2.x.Mobile.Application.Development

    - **PhoneGap 2.x 移动应用开发**:该书标题表明其主要内容是教授如何使用PhoneGap 2.x版本来开发移动应用。PhoneGap是一个开源的移动应用开发框架,允许开发者用HTML、CSS和JavaScript等技术来构建跨平台的移动应用...

    二维码扫描

    2. **BarcodeScanner插件**:PhoneGap有一个名为BarcodeScanner的插件,专门用于处理二维码和条形码扫描。通过运行`cordova plugin add cordova-plugin-barcodeScanner`命令,可以在项目中添加这个插件。 3. **...

    cordova-barcodescanner:从phonegap-plugin-barcodescanner派生并更新IOS上的UI

    适用于Cordova / PhoneGap的跨平台BarcodeScanner。 遵循,因此可与一起。 安装 这需要phonegap 7.1.0+(当前稳定的v8.0.0) phonegap plugin add phonegap-plugin-barcodescanner 也可以通过repo url直接安装...

    phoneGap二维码

    PhoneGap二维码技术是一种结合了移动应用开发框架PhoneGap与二维码识别功能的技术,它允许开发者创建跨平台的移动应用,同时实现对二维码的扫描和解析。PhoneGap是一个开源框架,基于HTML5、CSS3和JavaScript,使得...

    Cordova 3.x 实用插件(2) -- 二维码Barcode

    对于Cordova 3.x,这个插件可能是phonegap-plugin-barcodescanner。这是一个非常流行的插件,支持多种平台,包括Android、iOS、Windows Phone等。安装步骤通常如下: 1. 打开命令行工具,进入Cordova项目的根目录。...

    phonegapForMapAndBarcode:使用phonegap的项目,加入二维码扫描功能,和自定义插件地图导航功能

    总的来说,“phonegapForMapAndBarcode”项目展示了如何在PhoneGap应用中整合二维码扫描和地图导航功能,对于想要学习如何在跨平台移动应用中集成类似功能的开发者来说,这是一个很好的学习资源。通过深入研究和实践...

    phonegap 百度云推送、扫描二维码、自动更新插件

    本项目涉及PhoneGap与百度云推送的集成,以及二维码扫描和自动更新功能的实现。 首先,关于“百度云推送”,它是百度提供的一种针对移动应用的消息推送服务。通过集成百度云推送SDK,开发者可以向Android和iOS设备...

    Phonegap(windows phone 8) 二维码扫描

    wp8 和phonegap 下的二维码扫描,扫描取景框内的图片。取景框动画效果。 代码有详细注释。如有需要,但是没有分的同学可以跟我发邮件我会回复给你(-_-,没办法,我也需要分去下别的资源,忘见谅!)。 这个项目可以...

    cordova-plugin-barcodescanner:更新了扫描仪代码

    适用于Cordova / PhoneGap的跨平台BarcodeScanner。 支持平台 安卓 的iOS Windows 8 Windows Phone 8 安装 自动(CLI / Plugman) cordova plugin add cordova-plugin-barcodescanner 细节 此项目的Android源...

Global site tag (gtag.js) - Google Analytics