一、项目插件基本信息：
1、npm V6.9.0
2、node.js V10.16.0
3、ionic V5.2.0
4、Cordova V8.1.2 (cordova-lib@8.1.1)
5、java V1.8.0_131
6、gradle V4.10.1
二、在项目根目录执行doc，运行指令：
ionic cordova plugin add cordova-plugin-qrscanner@2.6.0
npm install @ionic-native/qr-scanner@4.15.0
三、src\app\app.module.ts 加入
import { QRScanner } from '@ionic-native/qr-scanner';
providers: [QRScanner ]
四、src\index.html ion-app增加样式
<ion-app style="background: none transparent;"></ion-app>
五、src\theme\variables.scss 增加样式
ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor { background: transparent none !important; .tabbar.show-tabbar{ opacity: 0; }}
六、src\assets\imgs 加入svg
链接: https://pan.baidu.com/s/19OcMUwadRVlvTuGYmKTQHA 提取码: 6j79
七、src\pages加入文件夹scan
scan.html
<!-- Generated template for the ScanPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation.--><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>
scan.module.ts
import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { ScanPage } from './scan';@NgModule({ declarations: [ ScanPage, ], imports: [ IonicPageModule.forChild(ScanPage), ],})export class ScanPageModule {}
scan.scss
page-scan {.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: 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; }}}
scan.ts
import { Component } from '@angular/core';import { IonicPage, NavController, NavParams } from 'ionic-angular';import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';import { DialogProvider } from '../../providers/dialog/dialog';/** * Generated class for the ScanPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */@IonicPage()@Component({ selector: 'page-scan', templateUrl: 'scan.html',})export class ScanPage { light: boolean;//判断闪光灯 frontCamera: boolean;//判断摄像头 isShow: boolean = false;//控制显示背景，避免切换页面卡顿 constructor(public navCtrl: NavController, public navParams: NavParams, private qrScanner: QRScanner, public dialog: DialogProvider, ) { //默认为false this.light = false; this.frontCamera = false; } ionViewDidLoad() { console.log('ionViewDidLoad ScanPage'); this.qrScanner.prepare() .then((status: QRScannerStatus) => { if (status.authorized) { // camera permission was granted // start scanning let scanSub = this.qrScanner.scan().subscribe((text: string) => { this.qrScanner.hide(); // hide camera preview this.qrScanner.destroy(); // destory camera scanSub.unsubscribe(); // stop scanning this.navCtrl.getPrevious().data.qrScannerTxt = text; this.navCtrl.pop(); }); // show camera preview this.qrScanner.show(); // wait for user to scan something, then the observable callback will be called } 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 } else { // 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(); }}
八、我这边逻辑是扫描完返回上一页，所以在上一页的ionViewWillEnter方法中加入
let qrScannerTxt = this.navParams.get('qrScannerTxt')|| null; if(qrScannerTxt)
qrScannerTxt 就是二维码中的参数，我这边是存了一个url，所以解析出来是一串url地址
九、我这边生成完是用android studio调试的，AndroidManifest.xml中的权限也要注意下
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.FLASHLIGHT" />
<uses-permission android:name="android.permission.INTERNET" />
