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>