最近在做一些混合式的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扫码插件的代码后发现
进入去看着就是添加了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"
3、 android:title="@string/menu_share"
4、 android:icon="@android:drawable/ic_menu_share"
5、 android:orderInCategory="1"
6、 android:showAsAction="withText|ifRoom"/>
7、 <item android:id="@+id/menu_encode"
8、 android:title="@string/menu_encode_vcard"
9、 android:icon="@android:drawable/ic_menu_sort_alphabetically"
10、 android:orderInCategory="2"
11、 android:showAsAction="withText|ifRoom"/>
12、 menu>
8、修改相应的硬件的访问权限,运行效果如下:
注意:需要在真机上运行