ionic2/3 二维码扫描功能

先说下会遇到的坑

我只在ios上运行了, 不管如果弄, 都黑屏, 找了很多解决办法, 最后还是国外一位大神给出解决办法

app.scss中添加

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

index.html

<ion-app style="background: none transparent;"></ion-app>

 

自己的page html file

<ion-content style="background: none transparent;">

 

app.module.ts 引入

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

providers: [

QRScanner,

]

html

<ion-header>
  <ion-navbar>
    <ion-title>扫描中...</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-scroll [ngClass]="{'qrscanner':isShow}">
  <div [ngClass]="{'qrscanner-area':isShow}">
  </div>
  <div [ngClass]="{'through-line':isShow}"></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

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


@IonicPage()
@Component({
  selector: 'page-qrscan',
  templateUrl: 'qrscan.html',
})
export class QrscanPage {

  // 返回回调
  callback: any;

  // 二维码扫描结果
  scanResult: any;

  light: boolean; //判断闪光灯
  frontCamera: boolean; //判断摄像头
  isShow: boolean = false; //控制显示背景，避免切换页面卡顿

  constructor(
    private navCtrl: NavController,
    private platfrom: Platform,
    private navParams: NavParams,
    private qrScanner: QRScanner,
) {
    //默认为false
    this.light = false;
    this.frontCamera = false;

    this.callback = navParams.get("callback");
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad QrscanPage');
    this.qrScanPrepare();
  }

  ionViewDidEnter() {
    this.showCamera(); //页面可见时才执行
    this.isShow = true; //显示背景
  }

  ionViewWillLeave() {
    this.hideCamera();
  }

  goBack() {
    this.callback(this.scanResult).then(() => {
      this.navCtrl.pop();
    });
  }

  // 进入下一页 传值 并清除此页的 堆栈
  gotoNextPage(params) {
    let data = {};
    data[PARA_ID] = params;
    this.navCtrl.push(this.pushPage, data).then(() => {
      const startIndex = this.navCtrl.getActive().index - 1;
      this.navCtrl.remove(startIndex, 1);
    });
  }

  qrScanPrepare() {
    this.qrScanner.prepare().then((status: QRScannerStatus) => {
      if (status.authorized) {
        let scanSub = this.qrScanner.scan().subscribe((text: string) => {
          this.scanResult = text;
          console.log('二维码扫描结果:', text);
          this.qrScanner.hide(); // hide camera preview
          scanSub.unsubscribe(); // stop scanning
          this.goBack();
        });

        this.qrScanner.show();

      } 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
        //this.toastSer.showToast('您未能允许App访问相机权限, 请前往设置页面允许App使用您的相机');
        setTimeout(() => {
          this.qrScanner.openSettings();
        }, 2000);
      } else {
        alert('权限被关闭');
        // permission was denied, but not permanently. You can ask for permission again at a later time.
        //this.toastSer.showToast('您未能允许App访问相机权限, 请前往设置页面允许App使用您的相机');
      }
    }).catch((e: any) => console.log('Error is', e));
  }

  /**
   * 闪光灯控制，默认关闭
   */
  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;
  }

  showCamera() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
  }

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

}

 

scss

page-qrscan {
  .qrscanner {
    background: none transparent !important;

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

  .through-line {
    left: 38%;
    width: 25%;
    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;
    margin-left: -20px;

    .icon-camera {
      float: left;
    }
  }

}