ionic3 实现扫码功能

ionic3 通过插件phonegap-plugin-barcodescanner，调用机器硬件摄像头实现扫码功能。

首先当然先了解下 phonegap-plugin-barcodescanner，这个插件。

支持的平台

Android的
iOS版
Windows（Windows / Windows Phone 8.1和Windows 10）
Windows Phone 8
黑莓10
浏览器

支持的条码类型

安装

首先，我们在项目中安装这个插件和ionic-native插件：

$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner

使用：

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

.....

constructor(private barcodeScanner: BarcodeScanner) { }
.....

scan{
 alert("We got a barcode\n" +
        "Result: " + barcodeData.text + "\n" +
        "Format: " + barcodeData.format + "\n" +
        "Cancelled: " + barcodeData.cancelled);
}

当然不能忘记将此插件添加到应用程序的NgModule中

...

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

...

@NgModule({
  ...

  providers: [
    ...
    BarcodeScanner 
    ...
  ]
  ...
})
export class AppModule { }

添加安卓平台

cordova platform add android

运行在真机上

cordova run android

后来在使用过程被大佬说这个插件不行啊，效率不行啊。在ios上扫码的速度还ok,可是到了android手机上扫码真慢，看他是先拍照截图下来再进行识别的，太慢了。

后来我看上了这款扫码插件→cordova-plugin-cszbar

install plugin：

ionic cordova plugin add cordova-plugin-cszbar

npm install --save @ionic-native/zbar

ps:要移除我前面安装的那个插件，不然再安装这个插件就会出现错误的。

支持平台：

Android
iOS

用法：

import { ZBar, ZBarOptions } from '@ionic-native/zbar';

constructor(private zbar: ZBar) { }

...

scan() {
    let options: ZBarOptions = {
      flash: 'off',
      text_title: '扫码',
      drawSight: false
    };

    this.zbar.scan(options)
      .then(result => {
        alert("结果：" + result); // Scanned code
      })
      .catch(error => {
        alert(error); // Error message
      });
  }

记得将插件添加到应用程序的NgModule中

...

import { ZBar } from '@ionic-native/zbar';

...

@NgModule({
  ...

  providers: [
    ...
    ZBar 
    ...
  ]
  ...
})
export class AppModule { }

这份Zbar插件实现的扫码功能，在ios上可以说效率是飞快了，在android上也很ok，比之前那个phonegap-plugin-barcodescanner快了很多了。

如果仅仅是ios跟android这两个平台上实现扫码功能，那么Zbar也是够用了。

此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

ps:github链接→https://github.com/tjwoon/csZBar