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 { }