无法在离子中显示 QRScanner 相机视图

Question

一段时间以来，我一直在使用二维码相机遇到某些困难。 我有一个登录页面，我希望当用户单击阅读按钮 qr 时，登录页面的离子内容变得透明，并且页脚中出现一个关闭阅读按钮，但我没有成功。 跟随尝试：

我的方法结构

  lerQR() {
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          this.leuQR.next(1);
          document.getElementsByTagName("ion-content")[0].style.opacity = "0";
          this.qrScanner.show();
          
          this.qrScan = this.qrScanner.scan().subscribe((text: string) => {
            console.log('Scanned something', text);
          });
        } else if (status.denied) {
          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));
  }

尝试 1：

运行 qrScanner.show 命令，然后使用 getelement 隐藏 ion-content；我可以读取二维码，但看不到相机：

          this.qrScanner.show();
          document.getElementsByTagName("ion-content")[0].style.opacity = "0";

尝试 2：

使用 get 元素从登录页面隐藏离子内容，然后调用 qrscanner.show() 命令；我可以读取二维码，但看不到相机：

             document.getElementsByTagName("ion-content")[0].style.opacity = "0";
             this.qrScanner.show();

尝试 3：

删除两层离子内容（记住我只有登录页面）然后给 qrscanner.show()

             document.getElementsByTagName("ion-content")[0].style.opacity = "0";
             document.getElementsByTagName("ion-content")[1].style.opacity = "0";
             this.qrScanner.show();

在这次尝试中，我可以看到摄像头，但无法读取二维码，收到以下错误：

Error is TypeError: Cannot read properties of undefined (reading 'style')
    at api.service.ts:683:60
    at ZoneDelegate.invoke (zone-evergreen.js:364:1)
    at Object.onInvoke (core.js:27558:1)
    at ZoneDelegate.invoke (zone-evergreen.js:363:1)
    at Zone.run (zone-evergreen.js:123:1)
    at zone-evergreen.js:857:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Object.onInvokeTask (core.js:27546:1)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
    at Zone.runTask (zone-evergreen.js:167:1)

由于页脚中有一个停止阅读按钮，我该如何显示相机并读取隐藏离子内容的二维码？

环境设置：

Ionic:

   Ionic CLI                     : 6.20.4 (C:\Users\micro-85\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.9.4
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 10.1.2
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 20 other plugins)

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.1

System:

   Android SDK Tools : 26.1.1 (C:\Users\micro-85\AppData\Local\Android\Sdk)
   NodeJS            : v16.17.1 (C:\Program Files\nodejs\node.exe)
   npm               : 9.1.2
   OS                : Windows 10

Answer 1

你用的是什么插件？ 其中有几个。 对于cordova-plugin-qrscanner

他们有显示/隐藏的方法：

QRScanner.show(function(status){
  console.log(status);
});

QRScanner.hide(function(status){
 console.log(status);
});