cordova-plugin-qrscanner

• v2/v3 https://ionicframework.com/docs/v3/native/qr-scanner/

ionic cordova plugin add cordova-plugin-qrscanner
npm install --save @ionic-native/qr-scanner@4

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';


constructor(private qrScanner: QRScanner) { }

...

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


       // start scanning
       let scanSub = this.qrScanner.scan().subscribe((text: string) => {
         console.log('Scanned something', text);

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

     } 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));

-v4/v5 https://ionicframework.com/docs/native/qr-scanner/

ionic cordova plugin add cordova-plugin-qrscanner
npm install @ionic-native/qr-scanner

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';


constructor(private qrScanner: QRScanner) { }

...

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


       // start scanning
       let scanSub = this.qrScanner.scan().subscribe((text: string) => {
         console.log('Scanned something', text);

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

     } 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));

参考综合2个项目

• https://github.com/yanxiaojun617/ionic2_tabs.git
• https://github.com/JiaXinYi/ionic3-native.git
• src/app/app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';


@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    QRScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

ionic generate page scan

• src/pages/scan/scan.html

<!--
  Generated template for the ScanPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<!--<ion-header>-->
<!--  <ion-navbar>-->
<!--    <ion-title>scan</ion-title>-->
<!--  </ion-navbar>-->
<!--</ion-header>-->

<!--<ion-content padding>-->

<!--</ion-content>-->

<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" [ngClass]="{'qrscanner':isShow}">
  <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>

• src/pages/scan/scan.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ScanPage } from './scan';

@NgModule({
  declarations: [
    ScanPage,
  ],
  imports: [
    IonicPageModule.forChild(ScanPage),
  ],
})
export class ScanPageModule {}

• src/pages/scan/scan.scss

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important;
  .tabbar.show-tabbar {
    opacity: 0;
  }
}


page-scan {
  .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;
    }
  }
}

• src/pages/scan/scan.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

/**
 * Generated class for the ScanPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-scan',
  templateUrl: 'scan.html',
})
export class ScanPage implements OnInit {
  protected light: boolean = false;
  protected frontCamera: boolean = false;
  protected isShow: 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));

    this.qrScanner.scan();

  }


  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();
    }
  }

  ionViewWillEnter() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView'); // tslint:disable-line
    this.isShow = true; // 显示背景
  }

  ionViewWillLeave() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView'); // tslint:disable-line
    this.qrScanner.hide(); // 需要关闭扫描，否则相机一直开着
    this.qrScanner.destroy(); // 关闭
  }

  // ionViewWillLeave() {
  //   window.document.querySelector('ion-app > .app-root').classList.remove('hide');
  //   this.qrScanner.destroy();
  // }
  // ionViewCanEnter() {
  //   if (this.qrScanner) {
  //     return true;
  //   } else {
  //     return false;
  //   }
  // }
  // ionViewWillEnter() {
  //   let elements = document.querySelectorAll(".tabbar");
  //   if (elements != null) {
  //     Object.keys(elements).map((key) => {
  //       elements[key].style.display = 'none';
  //     });
  //   }
  // }
  // ionViewWillLeave() {
  //   let elements = document.querySelectorAll(".tabbar");
  //   if (elements != null) {
  //     Object.keys(elements).map((key) => {
  //       elements[key].style.display = 'flex';
  //     });
  //   }
  // }
}