先说下会遇到的坑
我只在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;
}
}
}