Ionic4 Cordova 調用原生硬件 Api 實現掃碼功能

QR Scanner 速度快，樣式爲所欲爲，默認只能掃二維碼 https://ionicframework.com/docs/native/qr-scanner/

安裝插件

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

app.module.ts 引入依賴注入

 

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

 

providers: [
    Camera,
　　StatusBar,
　　SplashScreen,
　　QRScanner,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
]

新建頁面

ionic g page scan

使用

下載掃碼框背景圖 scanner.svg 放在 src/assets 目錄裏面

下載地址:http://www.ionic.wang/scanner_svg.zip

scan.html

 

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>掃碼中..</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [ngClass]="{'qrscanner':isShow}">
  <div [ngClass]="{'qrscanner-area':isShow}">
  </div>
  <div [ngClass]="{'through-line':isShow}"></div>
  <div class="button-bottom">
    <ion-button (click)="toggleLight()" class="icon-camera">
      <ion-icon name="flash"></ion-icon>
    </ion-button>
    <ion-button (click)="toggleCamera()" class="icon-camera">
      <ion-icon name="reverse-camera"></ion-icon>
    </ion-button>
  </div>
</ion-content>

css 樣式：

 

 .ion-page {
    background: transparent none !important;
  }

  ion-content {
    --background: transparent none !important;
  }

  .qrscanner {
    background: none;

    &-area {
      width: 100%;
      height: 86%;
      background: url(../../assets/scanner.svg) no-repeat center center;
      background-size: contain;
    }
  }

  .through-line {
    left: 25%;
    width: 50%;
    height: 2px;
    background: red;
    position: absolute;
    animation: myfirst 2s linear infinite alternate;
  }

  @keyframes myfirst {
    0% {
      background: red;
      top: 30%;
    }

    25% {
      background: yellow;
      top: 35%;
    }

    50% {
      background: blue;
      top: 40%;
    }

    75% {
      background: green;
      top: 45%;
    }

    100% {
      background: red;
      top: 50%;
    }
  }

  .button-bottom {
    width: 128px;
    position: absolute;
    left: 50%;
    bottom: 80px;
    margin-left: -64px;

    .icon-camera {
      float: left;
    }
  }

 

ts

import { Component, OnInit } from '@angular/core';

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

import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-scan',
  templateUrl: './scan.page.html',
  styleUrls: ['./scan.page.scss'],
})
export class ScanPage implements OnInit {


  public light: boolean;//判斷閃光燈
  public frontCamera: boolean;//判斷攝像頭
  public isShow: boolean = false;//控制顯示背景，避免切換頁面卡頓


  constructor(private qrScanner: QRScanner, public navController: NavController) { }

  ngOnInit() {
    // this.ionViewWillEnter() ;
  }

  //剛進來的時候執行掃碼
  ionViewWillEnter() {
    
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            console.log('Scanned something', text);
            alert(text);
            this.qrScanner.hide(); // hide camera preview
            scanSub.unsubscribe(); // stop scanning
            this.navController.back();

          });
          // 打開攝像頭
          this.qrScanner.show();
        } else if (status.denied) {
          console.log('沒有攝像頭權限，請前往設置中開啓');
        } else {
          // permission was denied, but not permanently. You can ask for permission
          console.log('沒有攝像頭權限，請前往設置中開啓');
        }
      })
      .catch((e: any) => console.log('Error is', e));
  }


  /*頁面可見後執行 */
  ionViewDidEnter() {
    this.isShow = true;//顯示背景
    console.log("ionViewDidEnter")
  }


  /**
* 閃光燈控制，默認關閉
*/
  toggleLight() {
    if (this.light) {
      this.qrScanner.disableLight();
    } else {
      this.qrScanner.enableLight();
    }
    this.light = !this.light;
  }
  /**
  * 先後攝像頭互換
  */
  toggleCamera() {
    if (this.frontCamera) {
      this.qrScanner.useBackCamera();
    } else {
      this.qrScanner.useFrontCamera();
    }
    this.frontCamera = !this.frontCamera;
  }

  //組件銷燬
  ionViewWillLeave() {
    this.qrScanner.hide();//須要關閉掃描，不然相機一直開着
    this.qrScanner.destroy();//關閉
  }

}

Ionic QR Scanner Android 掃描條形碼配置

 

找到 QRScanner.java

 ArrayList<BarcodeFormat> formatList = new ArrayList<BarcodeFormat>(); 
formatList.add(BarcodeFormat.QR_CODE);

而後在上面代碼後面新增下面代碼

formatList.add(BarcodeFormat.UPC_A); 
formatList.add(BarcodeFormat.UPC_E);
formatList.add(BarcodeFormat.EAN_13);
formatList.add(BarcodeFormat.EAN_8); 
formatList.add(BarcodeFormat.CODE_39); 
formatList.add(BarcodeFormat.CODE_93); 
formatList.add(BarcodeFormat.CODE_128); 
formatList.add(BarcodeFormat.ITF); 
formatList.add(BarcodeFormat.DATA_MATRIX);

真機測試效果：

 

---

---

 

出現掃描框，可是沒有打開相機，白屏，同時Cordova.js 找不到報錯

找到index.html中，手動引入，從新編譯運行便可

 <script src="cordova.js"></script>