本文属于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的标准插件安装文档:
例如在 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 函数
相关推荐
PhoneGap 3.x Mobile Application Development Hotshot.2014.pdf
phoneGAP就是Cordova,据说执行起来比网页快, Android, ios通吃
NULL 博文链接:https://fanfanlovey.iteye.com/blog/1893374
Phonegap 二维码扫描实例,barcode示例!
1. 首先通过cordova 命令安装二维码扫描插件 cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git 2. 安装完插件后将二维码的lib包替换为zxing.lib,jar包在我上传的demo里面有。 3....
cordova扫码插件phonegap-plugin-barcodescanner,修复了在ios10上面的内存泄漏导致的闪退bug
phonegap扫描二位码插件,顺便给大家推荐phonegap扫描二维码的教程http://blog.csdn.net/u014646984/article/details/25655725,这篇博客写得比较详细,按照步骤可以搭建出扫描二维码的android程序
有别phonegap官网上的二维码扫描插件,那个界面太丑了,此插件界面好看,而且兼容ios和android,扫描灵敏,是ionic、phonegap等hybridapp中二维码扫描功能的好插件。
PhoneGap.2.x.Mobile.Application.Development
基于phonegap的一个条码二维码插件代码,按照文档步骤添加到phonegap工程即可。
PhoneGap安装.docx
wp8 和phonegap 下的二维码扫描,扫描取景框内的图片。取景框动画效果。 代码有详细注释。如有需要,但是没有分的同学可以跟我发邮件我会回复给你(-_-,没办法,我也需要分去下别的资源,忘见谅!)。 这个项目可以...
PhoneGap插件条形码扫描仪=============================== 适用于Cordova / PhoneGap的跨平台BarcodeScanner。 遵循,因此可与一起。安装这需要phonegap 7.1.0+(当前稳定的v8.0.0) phonegap plugin add phonegap-...
phoneGap是不会手机开发的人员可以进使用JS+html来进行手机开发 使程序员们可以跨编程语i言进行各种平台的手机开发了
You will then learn how to build a hybrid application using PhoneGap. Finally, by the end of the book, you will be able to implement the most common features of modern mobile apps and build rich, ...
............................................................................................................3 五、Ionic 有时候安装失败怎么办?.............................................................
PhoneGap内幕简单介绍PhoneGap HTML5 CSS3 JavaScript
Packt.PhoneGap.for.Enterprise.2014
使用phonegap实现了百度云推送,并且实现了通知栏消息单击后自定义打开跳转,同时实现了二维码扫描和自动更新功能