Question

我是离子领域的新手，我正在尝试实施QR Scannereverything。我按照IONIC文档的说明进行了所有操作，但“相机”未显示在页面中，并且我还在ion-app背景中添加了样式：透明无，但不起作用。

有我的ts密码

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

constructor(private qrScanner: QRScanner){}


ionViewWillEnter(){
   this.showCamera();
}
ionViewWillLeave(){
   this.hideCamera();
}


      scan(){
        // Optionally request the permission early
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
         if (status.authorized) {
           console.log("enter saan");
           // camera permission was granted


           // start scanning
           let scanSub = this.qrScanner.scan().subscribe((text: string) => {
             console.log('Scanned something', text);


             this.qrScanner.hide(); // hide camera preview
             scanSub.unsubscribe(); // stop scanning
           });
           this.qrScanner.show();
           console.log(" shows");


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

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

  hideCamera() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
  }

和我的app-routing.module.ts代码

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
providers: [
QRScanner
]

Answer 1

您不应将其放入app-routing.module.ts中，而应将其放入app.module.ts中：

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
  providers: [
  QRScanner
]

然后，在html文件中，您不应有任何内容。

但是在您的CSS文件中，您应该具有以下内容：

html, body, ion-app, ion-content, ion-page, .nav-decor {
  background-color: transparent !important;
}

ty文件应类似于：

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {NavController, Platform} from '@ionic/angular';
import {QRScanner, QRScannerStatus} from '@ionic-native/qr-scanner/ngx';
import {Location} from '@angular/common';

@Component({
  selector: 'app-scanner-qr',
  templateUrl: './scanner-qr.page.html',
  styleUrls: ['./scanner-qr.page.scss'],
})
export class ScannerQrPage implements OnInit {


  constructor(private  router:  Router, public navCtrl: NavController, private qrScanner: QRScanner,
              public platform: Platform, private location: Location) {
    // solve the problem - "plugin not installed".
    platform.ready().then(() => {
      this.scan();
    });
  }

  ngOnInit() {
  }

  scan() {
    // Optionally request the permission early
    this.qrScanner.prepare()
        .then((status: QRScannerStatus) => {
          if (status.authorized) {
            console.log('qrscaner authorized');
            // camera permission was granted
            // start scanning
            const scanSub = this.qrScanner.scan().subscribe((text: string) => {
              console.log('Scanned something', text);
              // alert(text);
              this.location.back(); // go to previous page
              this.qrScanner.hide(); // hide camera preview
              scanSub.unsubscribe(); // stop scanning
            });

            this.qrScanner.resumePreview();

            // show camera preview
            this.qrScanner.show().then((data: QRScannerStatus) => {
              console.log('scaner show', data.showing);
            }, err => {
              alert(err);
            });
            // 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
            if (!status.authorized && status.canOpenSettings) {
              if (confirm('Would you like to enable QR code scanning? You can allow camera access in your settings.')) {
                this.qrScanner.openSettings();
              }
            }
          } 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));
  }
}

希望对您有帮助。

qrcode扫描器在离子应用程序中不起作用

1 个答案: