Ionic2入门教程（十三）带你走近3款二维码扫描插件

时间 2019-11-08

标签 ionic2 ionic 入门教程十三走近二维扫描插件繁體版

原文原文链接

Ionic二维码扫描插件

系列教程看这里
Ionic2入门教程（一）安装和环境配置
 Ionic2入门教程（二）进阶配置：Android打包
 ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构
 ionic2入门教程（五）如何使用IonicPage
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）
ionic2入门教程（七）来一个五星评分
 ionic2入门教程（八）高仿网易公开课（2）
ionic2入门教程（九）样式修改和主题切换
 Ionic2入门教程（十）如何debug一个Ionic应用
 Ionic2入门教程（十一）制做一个视频背景欢迎页
 Ionic2入门教程（十二）使用阿里巴巴矢量图标库Iconfont

0、关于插件

想在ionic2+中使用插件，要用到ionic native、官方网址以下：
https://ionicframework.com/do...
Ionic Native是一个用于Cordova / PhoneGap插件的TypeScript包装器，它可让您在Ionic移动应用程序中添加任何您须要的本地功能。
Ionic Native其实不是插件，它是基于typeScript封装了cordova插件的调用模块，也就是说Ionic Native只是调用库，而不包含插件代码。css

一、Cordova插件使用方式一：基于cordova

这种方式很是依赖cordova文档
在import以后，@Component以前加上declare的声明代码
declare let DemoPlugin: any;
经过DemoPlugin来调用相关方法

二、Cordova插件使用方式二：基于ionic-native

早期的ionic-native是一个封装了所有插件调用库模块，引用一次，就会引入全部插件，很冗余。因此拆分红一个个模块。这样当装哪一个cordova插件时，再装对应的native子模块。咱们这里用到了就是这样的方式。基于typeScript的class概念，每一个方法属性都能较清楚地看到定义和说明。html

$ ionic cordova plugin add phonegap-plugin-barcodescanner

$ npm install --save @ionic-native/barcode-scanner

0.一、按推荐顺序倒序排列

最近项目用到了二维码扫描的功能，我的以为学习的过程应该是，会用，用好，会写，写好。
从用别人的插件，到本身能写出一款很好的插件，这样的过程，应该是最有意义的。css3

三款插件分别是barcode-scanner，zbar，qr-scanner，前两个都比较经常使用，可是实际上，很难用，第一个扫描时存在闪屏，速度慢，第二款速度到不错，全屏，但总以为少了什么，由于页面上都没办法进行定制，好比说中间的小方框，上下滚动的线，终于找到了第三个qr-scanner，是经过将页面背景设置为透明，这样页面上的元素就能够彻底本身设计，并且做者还将全部方法暴露出来，真正是一个很灵活的插件。git

为qr-scanner打call~，虽然star很少，但我我的最喜欢这个~，不过用起来，会比较难一些~
https://github.com/bitpay/cor...
放图：github

我实现了上述三种插件的使用，demo下载看这里，使用的话建议从3开始~
https://github.com/JiaXinYi/i...npm

注意：三个扫描插件互相会冲突，安装新的要移除前一个，移除命令为 ionic cordova plugin rm

一、barcode-scanner

https://ionicframework.com/do...segmentfault

$ 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() {
    let options: BarcodeScannerOptions = {
      preferFrontCamera: false,//前置摄像头
      showFlipCameraButton: true,//翻转摄像头按钮
      showTorchButton: true,//闪关灯按钮
      prompt: '扫描中……',//提示文本
      formats: 'QR_CODE',//格式
      orientation: 'portrait',//方向
      torchOn: false,//启动闪光灯
      resultDisplayDuration: 500,//显示扫描文本
      disableSuccessBeep: true // iOS and Android
    }
    this.barcodeScanner
      .scan(options)
      .then((data) => {
        this.barcodeData = data;
        const alert = this.alertCtrl.create({
          title: 'Scan Results',
          subTitle: data.text,
          buttons: ['OK']
        });
        alert.present();
      })
      .catch((err) => {
        const alert = this.alertCtrl.create({
          title: 'Attention!',
          subTitle: err,
          buttons: ['Close']
        });
        alert.present();
      });

二、zbar

https://ionicframework.com/do...ionic

$ ionic cordova plugin add cordova-plugin-cszbar

$ npm install --save @ionic-native/zbar

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

constructor(private zbar: ZBar) { }

// 扫描
  scan() {
    let options: ZBarOptions = {
      flash: 'off',
      text_title: '扫码',
      text_instructions: '请将二维码置于红线中央',
      // camera: "front" || "back",
      drawSight: true
    };

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

三、qr-scanner

https://ionicframework.com/do...ide

$ ionic cordova plugin add cordova-plugin-qrscanner

$ npm install --save @ionic-native/qr-scanner

qrscan() {
    // this.modalController.create('ScanPage').present();
    this.navCtrl.push('ScanPage');
    跳转到了scan这个页面~比较符合正常的使用方式吧~
  }

.html
<ion-header>
  <ion-navbar>
      <ion-title>扫描中……</ion-title>
      <ion-buttons start>
          <button ion-button (click)="dismiss()">
              <ion-icon name="close"></ion-icon>
          </button>
      </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content no-scroll class="qrscanner">
  <div class="qrscanner-area">    
  </div> 
   <div class="through-line"></div>
  <div class="button-bottom">
      <button (click)="toggleLight()" ion-fab class="icon-camera" margin-right>
          <ion-icon name="flash"></ion-icon>                  
      </button>
      <button (click)="toggleCamera()" ion-fab class="icon-camera">
          <ion-icon name="reverse-camera"></ion-icon>                  
      </button>
  </div>    
</ion-content>

.ts
  protected light: boolean = false;
  protected frontCamera: boolean = false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private qrScanner: QRScanner,
    public viewCtrl: ViewController
  ) {
  }

  ngOnInit() {
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // camera permission was granted

          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            // alert(text);

            this.qrScanner.hide(); // hide camera preview
            scanSub.unsubscribe(); // stop scanning
          });

          // show camera preview
          this.qrScanner.show();

          // wait for user to scan something, then the observable callback will be called

        } else if (status.denied) {
          // camera permission was permanently denied
          // you must use QRScanner.openSettings() method to guide the user to the settings page
          // then they can grant the permission from there
        } else {
          // permission was denied, but not permanently. You can ask for permission again at a later time.
        }
      })
      .catch((e: any) => console.log('Error is', e));
  }
  public dismiss(): void {
    this.viewCtrl.dismiss();
  }
  toggleLight() {
    this.light = !this.light;
    if (this.light) {
      this.qrScanner.disableLight();
    } else {
      this.qrScanner.enableLight();

    }
  }
  toggleCamera() {
    this.frontCamera = !this.frontCamera;
    if (this.frontCamera) {
      this.qrScanner.useBackCamera();
    } else {
      this.qrScanner.useFrontCamera();
    }
  }

.scss
很作做的作了一个上下移动的横线，也不知道是受了谁家二维码扫描的影响
 .qrscanner {
    background: none;
    &-area {
      width: 100%;
      height: 85%;
      background: url(../assets/imgs/scanner.svg) no-repeat center center;
      background-size: contain;
    }
  }
  .through-line {
    left: 20%;
    width: 60%;
    height: 2px;
    background: red;
    position: absolute;
    animation: myfirst 5s linear infinite alternate;
  }
  @keyframes myfirst {
    0% {
      background: red;
      top: 180px;
    }
    25% {
      background: yellow;
      top: 220px;
    }
    50% {
      background: blue;
      top: 240px;
    }
    75% {
      background: green;
      top: 260px;
    }
    100% {
      background: red;
      top: 280px;
    }
  }
  .button-bottom {
    width: 128px;
    position: absolute;
    left: 50%;
    bottom: 80px;
    margin-left: -64px;
    .icon-camera {
      float: left;
    }
  }

对，就是中间这条线~用了css3的动画实现的，还蛮有意思的~svg

四、demo下载看这里

https://github.com/JiaXinYi/i...还不够完善~若是你作出了更棒的，欢迎留下你的github噢~互相学习~若是对各位有帮助的话，欢迎star，fork~