1.安裝插件
$ ionic cordova plugin add cordova-plugin-qrscanner
$ npm install --save @ionic-native/qr-scanner@4
2.新建掃描頁面
$ ionic g page scan
3.代碼
背景圖片：下載鏈接
scan.html
<ion-header >
? <ion-navbar >
? ? ? <ion-title>掃描中...</ion-title>
? </ion-navbar>
</ion-header>
<ion-content padding style="background: none transparent;">
? <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>
scan.ts
import { Component } from '@angular/core';
import { NavController, NavParams, ViewController, ToastController } 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.
*/
@Component({
? selector: 'page-scan',
? templateUrl: 'scan.html',
})
export class ScanPage {
? light: boolean;//判斷閃光燈
? frontCamera: boolean;//判斷攝像頭
? isShow: boolean = false;//控制顯示背景，避免切換頁面卡頓
? constructor(
? ? private navCtrl: NavController,
? ? private navParams: NavParams,
? ? private qrScanner: QRScanner,
? ? private viewCtrl: ViewController,
? ? private toastCtrl: ToastController) {
? ? ? //默認為false
? ? ? this.light = false;
? ? ? this.frontCamera = false;
? }
? ionViewDidLoad() {
? ? 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
? ? ? ? ? ? this.navCtrl.pop();
? ? ? ? ? });
? ? ? ? ? this.qrScanner.resumePreview();
? ? ? ? ? // show camera preview
? ? ? ? ? this.qrScanner.show()
? ? ? ? ? .then((data : QRScannerStatus)=> {
? ? ? ? ? ? // alert(data.showing);
? ? ? ? ? },err => {
? ? ? ? ? ? this.showToast('bottom', err);
? ? ? ? ? });
? ? ? ? ? // wait for user to scan something, then the observable callback will be called
? ? ? ? } else if (status.denied) {
? ? ? ? ? this.showToast('bottom', "掃描出錯");
? ? ? ? ? // 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 {
? ? ? ? ? this.showToast('bottom', "未獲得相機權限");
? ? ? ? ? // permission was denied, but not permanently. You can ask for permission again at a later time.
? ? ? ? }
? ? ? })
? ? ? .catch((e: any) => console.log('Error is', e));
? }
? ionViewDidEnter(){
? ? //頁面可見時才執(zhí)行
? ? this.showCamera();
? ? this.isShow = true;//顯示背景
? }
? /**
? * 閃光燈控制，默認關閉
? */
? 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();//關閉
? }
? ionViewWillLeave() {
? ? this.hideCamera();
? }
? showToast(position: string, msg: string) {
? ? let toast = this.toastCtrl.create({
? ? ? message: msg,
? ? ? duration: 2000,
? ? ? position: position
? ? });
? ? toast.present(toast);
? }
}
scan.scss
page-scan {
? .scroll-content {
? ? background: transparent none;
? }
? .qrscanner {
? ? background: none;
? ? &-area {
? ? ? width: 100%;
? ? ? height: 86%;
? ? ? background: url(../../../assets/imgs/scanner.svg) no-repeat center center;
? ? ? background-size: contain;
? ? }
? }
? .through-line {
? ? left: 25%;
? ? width: 52%;
? ? 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;
? ? }
? }
}
參考：鏈接
