360SDN.COM

首页/Ionic/列表

ionic3 实现扫描二维码功能

来源:  2018-04-03 19:21:59    评论:0点击:

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

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权