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初始安装就支持多种一维条码和二维条码规范，无需再手工添加。