修改基于zxing库的cordova扫描二维码插件BarcodeScan扫码界面的UI

最近在做一些混合式的APP开发,主要用到了ionic+cordova两个框架。关于混合式APP和ionic和cordova就是用开发web的一套东西开发APP应用,就不多说这些了,这不是这篇文章的重点,感兴趣的同学可以自己了解一下。现在在团队中主要负责一些cordova调用底层硬件设备的插件的用法比如:调用通讯录、调用拨号功能、定位、调用摄像头扫描二维码。

好了重点来了!这篇文章就是调用cordova 的BarcodeScanner插件扫描和生成二维码,cordova 的BarcodeScanner插件已经提供了扫描二维码的功能,但是那个扫描的界面简直不能太丑,所以就想改一下扫描二维码的界面。查看cordova的扫码插件可以看到插件本身也是调用开源的zxing库,网上关于在android的原生开发中修改zxing源码达到修改扫码界面的文章一堆,但是修改cordova插件调用的zxing库就没那么简单了。
所以我就想了一种方案:
1、从zxing库里的关于扫码界面的代码改起
2、改完之后重新打包成jar包替换 进入platforms\android\libs文件夹下把com.google.zxing.client.android.captureactivity.jar替换掉,运行出错。方案失败

仔细研究了cordova扫码插件的代码后发现
BarcodeScanner\src\android目录下有这个文件夹
进入去看着就是添加了android平台之后的zxing库啊

好了,方案出来了,就修改这个了,修改完之后打成jar包替换掉cordova项目中的进入platforms\android\libs文件夹下把com.google.zxing.client.android.captureactivity.jar替换掉就OK啦。
具体的修改有时间我在写上来,我把修改好的jar包放上来,有需要的可以下载之后直接替换就能使用了[修改之后的zxing jar包下载](http://download.csdn.net/detail/ecnu_df/9401517)

说了这么多不知道都说清楚了么跟着我写个demo吧。动动手都就明白了。
具体的步骤如下:
打开 cmd
1、创建cordova项目

cordova create hellobarcode com.example.cordova mybarcode

2、进入 项目文件夹hellobarcode

cd hellobarcode

3、增加android平台

cordova platform add android

4、加入扫码插件

cordova plugin add https://github.com/wildabeast/BarcodeScanner.git

5、把项目导入eclipse中,把MainActivity中libs目录下的com.google.zxing.client.android.captureactivity.jar文件替换为
我修改好的zxing_4.1.8.jar文件,然后刷新一下项目。
6、修改asset 文件夹下的index.html文件增加两个Button button中的onclick事件指向下面两段js代码

1. //扫码的js接口代码    
2.  cordova.plugins.barcodeScanner.scan(  
2.        function (result) {  
3.         //实现功能逻辑
4.            alert("We got a barcode\n" +  
5.                  "Result: " + result.text + "\n" +  //解析之后的二维码源码,url等
6.                  "Format: " + result.format + "\n" +  //编码的格式
7.                  "Cancelled: " + result.cancelled);  
8.        },   
9.        function (error) {  
10.           alert("Scanning failed: " + error);  
11.       });  
1. //生成二维码的js接口代码
2.      cordova.plugins.barcodeScanner.encode(  
2.        "TEXT_TYPE",   //编码的类型 文本型、email、sms、手机号
3.        "http://www.baidu.com",   //url
4.        function(success) {
5.         //实现功能逻辑  
6.          alert("encode success: " + success);  //生成之后会默认作为图片显示出来
7.        }, function(fail) {  
8.          alert("encoding failed: " + fail);  
9.        }); 

7、修改相关的配置文件
用以下代码替换platforms\android\res\menu\encode.xml 中的代码

1、 <menu xmlns:android="http://schemas.android.com/apk/res/android">  
2、   <item android:id="@+id/menu_share"  
3android:title="@string/menu_share"  
4android:icon="@android:drawable/ic_menu_share"  
5android:orderInCategory="1"  
6android:showAsAction="withText|ifRoom"/>  
7、      <item android:id="@+id/menu_encode"  
8android:title="@string/menu_encode_vcard"  
9android:icon="@android:drawable/ic_menu_sort_alphabetically"  
10android:orderInCategory="2"  
11android:showAsAction="withText|ifRoom"/>  
12、    menu> 

8、修改相应的硬件的访问权限,运行效果如下:
注意:需要在真机上运行
扫码扫码结果生成二维码

你可能感兴趣的:(Cordova的插件)