phonegap3.X调整二维码扫描功能(Ba…

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

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

<wbr></wbr>

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

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

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

1 phonegap的安装/环境搭建

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

<wbr></wbr>

2.BarcodeScanner下载安装

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

<wbr></wbr>

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

<wbr></wbr>

<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr>

<wbr></wbr>

<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr>

3.Android环境下搭建示例

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

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

<wbr></wbr>

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

（但是这里的core.jar 里面把com.google.zxing.client.android这个包删了，因为和barcodeScanner<wbr>的libary<span style="margin: 0px; padding: 0px; list-style: none outside none; word-break: normal; word-wrap: break-word; font-size: 14px;">工程有重复的class,部署时报错，core.jar也在本文附件的</span></wbr>libs中）

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

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

<wbr></wbr>

<wbr><br style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;"><wbr></wbr></wbr>

<wbr></wbr>

<wbr></wbr>

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

<wbr></wbr>

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

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

<wbr></wbr>

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

<wbr></wbr>

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

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

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

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

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

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

注：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

<wbr></wbr>

<wbr></wbr>

<wbr><strong style="margin: 0px; padding: 0px;">随便用命令安装一个插件，比如：Camera。然后对照变化，去手动地改工程的配置。</strong></wbr>

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

1.\res\xml\config.xml：新增了节点

类似这样的结构：

<wbr></wbr>

<wbr></wbr>

<wbr></wbr>

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

<wbr></wbr>

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

<wbr></wbr>

但是实际调用时，报错：cordova.plugins.barcodeScanner.scan 说这个barcodeScanner没有scan这个函数，用chrome debug进去，发现是说<wbr>require 这个函数是 undefind<wbr>。</wbr></wbr>

<wbr></wbr>

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

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

<wbr></wbr>

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

<wbr></wbr>

接下来：

<wbr></wbr>

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

<wbr></wbr>

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

<wbr></wbr>

function scanForCodeBar(targetInputName){
                  var barcodeScanner = new BarcodeScanner();
                  barcodeScanner.scan(
                          function (result) {
                                  
                                var code = result.text;
                                $("input[name='"+targetInputName+"']").val(code);
                          }, 
                          function (error) {
                                  alert("扫描失败: " + error);
                          }
                   );
}

<wbr></wbr>

<wbr></wbr>

在实际设备上运行，还是报错（此时已经成功地执行到了BarcodeScanner.java里面的scan方法）：

<wbr></wbr>

这个错误是在启动<wbr>BarcodeScanner的Activity时的错误。</wbr>

<wbr></wbr>

笔者试了半天，解决方法如下：

<wbr></wbr>

看到BarcodeScanner.java的这句

<wbr></wbr>

<wbr>改成：</wbr>

<wbr></wbr>

到这里终于能使用<wbr>BarcodeScanner 的扫描功能了。</wbr>

<wbr></wbr>

调用方法：

οnclick="scanForCodeBar('Col_003')"/>

<wbr></wbr>

在点击这个input后会跳转到BarcodeScanner<wbr>的扫描界面，当扫描到内容后，会将结果回填到 Col_003这个input中去，具体怎么用这个返回结果 可以参考前面写的<strong style="margin: 0px; padding: 0px;">barcodescanner.js</strong><strong style="margin: 0px; padding: 0px;"><wbr></wbr></strong>-<wbr><strong style="margin: 0px; padding: 0px; font-size: 12px; line-height: 18px;">scanForCodeBar 函数</strong></wbr></wbr>