1.下载好qrcode的cordova插件：ionic cordova plugin add codova-plugin-qrscanner

2.下载好npm install --save @ionic-native/qr-scanner

3.创建一个扫描仪页面，整个页面都是拿来作扫描的界面，这个界面在调用qrscanner对象的scan方法，此方法会返回文本扫描的Observable，使用订阅subscribe，scanner对象的调用unsubscribe将会取消订阅，

4.然后调用qrscanner对象的show方法就能让webview以透明的状态显示出来

5.我在全局样式表 中写了ion-app透明

主要代表：variables.scss文件

ion-app.cameraView,ion-app.cameraView ion-content,ion-app.cameraView .nav-decor
{background: transparent none !important;.tabbar.show-tabbar{opacity: 0;}
}

然后在ionViewDidEnter中进行

(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');

这一句将会透明化ion-app

而取消透明直接调用

classList.remove("cameraView")即可。

6.QRScannerStatus

在import中导入这个，然后这个东西用来判断是否获得了相机权限，获取了执行

status.authorized方法，拒绝了调用

status.denied方法

7.注意报错的地方，如果你没有在app.module.ts文件中import

import { QRScanner} from '@ionic-native/qr-scanner';

并将QRScanner放在provider中，那么就会报错说没有provider支持。

8.下面是html，ts，css，以及theme文件夹中的variables.scss文件样式

首先是html代码：

<ion-content no-scroll class="qrscanner" ><div class="qrscanner-area"></div><div class="through-line"></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 { NavController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';@Component({selector: 'page-home',templateUrl: 'home.html'
})
export class HomePage {light: boolean;//判断闪光灯
  frontCamera: boolean;//判断摄像头

  constructor(private qrScanner: QRScanner) {}ionViewDidLoad(){var that=this;that.qrScanner.prepare().then((status: QRScannerStatus) => {if (status.authorized) {let scanSub = that.qrScanner.scan().subscribe((text:string)=>{alert(text);// that.qrScanner.hide();
            // scanSub.unsubscribe();
          });that.qrScanner.show();} else if (status.denied) {alert("获取权限失败");} else {alert("没有权限");}}).catch((e: any) =>{alert("调用扫描仪错误");//没有获得权限就报错
      });}ionViewDidEnter(){//页面可见时才执行
    this.showCamera();//开始透明化ion-app
  }showCamera() {(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');//写在全局样式表中，对ion-app进行透明化
  }hideCamera() {this.qrScanner.hide();//需要关闭扫描，否则相机一直开着
    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');//取消ion-app透明化
  }ionViewWillLeave() {this.hideCamera();//离开页面也要关闭相机调用
  }/**
   * 闪光灯控制，默认关闭
   */
  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;}}

在是css样式代码：

page-home {.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;}}
}

这里有一张背景图片，我会在我的博客里上传，让你们可以下载，这个图片就是扫描仪那个框框

最后是全局样式代码variables.scss：

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;@import "ionic.globals";// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/




// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (primary:    #488aff,secondary:  #32db64,danger:     #f53d3d,light:      #f4f4f4,dark:       #222
);// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here




// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here




// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here




// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.default";// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/

@import "ionic.ionicons";// Fonts
// --------------------------------------------------

@import "roboto";
@import "noto-sans";ion-app.cameraView,ion-app.cameraView ion-content,ion-app.cameraView .nav-decor
{background: transparent none !important;.tabbar.show-tabbar{opacity: 0;}
}

这样就能直接在手机上运行了，图片资源链接：

https://download.csdn.net/download/a617332635/10450634