ionic 3+cordova qrスキャナ使用

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;
    }
  }
}



  
ここに1枚の背景のピクチャーがあって、私は私のブログの中でアップロードすることができて、あなた达にダウンロードすることができて、このピクチャーはスキャナーのあの枠です
最後にグローバルスタイルコード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