quasar+cordova+zbar实现Android扫描条形
因为项目需要,笔者研究了cordova下常用的两个条码插件:cordova-plugin-cszbar和cordova-plugin-qrscanner(以下简称为zbar和qrscan)。这两个插件都非常好用、读码速度都非常快,但针对不同开发环境得有选择的使用,笔者为此就浪费了不少时间,本文就将这个经验分享给大家。
初始,笔者钟情于qrscan,因为这个插件确实很灵活、界面可以做的很漂亮,而且可以提供用户定义的多种功能,但是最终因为一个暂时解决不了的“坑”,只能放弃qrscan,无奈选择了zbar。
一、初始感受
1、界面体验
qrscan的扫码界面明显比zbar要丰富,qrscan可以在视频前面自由加上各种面板、面板上放上各种按钮、图标、文字等,实现“打开/关闭闪光灯”、“前/后摄像头切换”、“打开/关闭预览”等功能,视频中间还可以放一个聚焦框,聚焦框还可以防止一个滚动的扫描线,总之界面可以做的很炫酷。
qrscan能实现如此炫酷的界面,是因为qrscan插件会在页面打开后自动生成一个video控件插入到body中,并且覆盖全部的背景,后续添加的div等控件,都是覆盖在这个视频之上(即视频就成为覆盖全屏背景)。但是所谓“成也萧何败也萧何”,就是因为自动生成的video背景,最终导致我放弃了qrscan。
zbar的界面相对就“寒酸”多了,页眉一行固定文字、页脚一行固定文字+一个闪光灯图形按钮,视频中间有一根红线(通过配置也可以不显示这根线),其他就没有,除了文字内容可以配置,其他都不可定制,也加不了其他内容(面板、按钮、图标等)。
(qrscan开发的时候没有来得及留下体现笔者意图的截图,就卸载掉了,所以只能从github上拷贝了一张图以说明问题)2、扫码体验
qrscan只要对上条码、聚焦完成,扫码速度很快,给人有信任感;zbar的扫码速度是巨快,比较神奇的是对着桌面也能扫出结果(汗),基本是打开扫描界面很快都能返回扫描结果,无论对着条码还是对着桌面(大汗)。当然,经过笔者有限的测试,zbar只要对着条码(无论是火车票上的二维条码,还是香烟盒上的一维条码,都能够快速且正确的识别出来)。但zbar对着桌面也能急速扫出结果的行为,总是有种不靠谱的感觉。
二、代码实现
详细的插件安装和代码实现,在度娘和github上都有详细介绍,而且其步骤和代码都非常简单、直观,所以本文就不赘述这部分内容了。
qrscan的上图扫码界面是需要单独创建一个页面文件,视频自动成为这个页面上覆盖全屏的背景,其上可以自己开发各种面板等界面组件。
zbar不需要单独创建扫码页面文件,在执行cloudSky.zBar.scan的时候自动创建上图的扫码界面(界面上的文字是在scan方法中以option参数方式提供),扫描到结果后就自动关闭这个界面。
所以从开发上看,zbar就非常简单,只需要调用一个scan方法就可以了,成功返回值就是扫描到的结果;而qrscan不但要专门开发一个扫描页面,还有prepare、scan、show、hide、cancelScan等多个方法。
三、我遇到的坑
我的项目是基于quasar框架实现的,quasar虽然基于vuejs,但其本质是一个单页应用,即所有功能都是基于一个body实现,通过在这个body内路由不同的组件实现不同的功能和切换;上面说过,qrscan是自动在body中插入一个覆盖全屏的视频(摄像头)背景。
以上两个特点一结合,就导致了一个问题:qrscan扫描完成返回主界面后,主界面的背景就成灰黑色了;甚至在扫描界面上如果不执行销毁方法,关闭扫描界面后,主界面的背景就是当前摄像头拍摄的视频(汗)。关键是,扫描界面关闭后,主页面灰黑色的背景,qrscan没有提供任何方法来解决。显然,作为一个应用,是不可能忍受这种界面效果。
而zbar就不存在这个问题,在扫描到结果自动关闭扫描界面后 ,就回到原汁原味的调用界面上。
四、总结
quscan不适合Quasar这种单页应用框架,但比较适合ionic等多页面的移动终端开发框架;zbar适合追求代码精简、界面干净的人士使用,。
五、后记
1、关于二次开发问题
qrscan和zbar都是开源插件,因此通过对插件的二次开发,应该可以解决zbar的界面单独问题,以及qrscan的背景不能还原问题。这一方面后续有时间再深究。
2、关于支持的条码问题
qrscan和zbar都支持一维条码和二维条码的扫描识别,而且能够识别市面上的大部分编码规范。但是qrscan初始安装的时候只支持QR Code码,如果要支持更多条码规范,需要手工添加,具体可以找度娘问;zbar初始安装就支持多种一维条码和二维条码规范,无需再手工添加。