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(){
//页面可见时才执行
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;
}
}
}
参考：链接
