Question

我最近遇到了一个名为cordova-plugin-qrscanner（https://github.com/bitpay/cordova-plugin-qrscanner）的相当新的cordova插件。之前我一直在使用其他QR扫描仪，但这些只是覆盖某种原生相机UI，直到扫描完QR后再返回应用程序。

然而，这个插件的方法有点不同。实际上显示的是相机＆＃34;背后＆＃34;你的应用程序，你必须使一切透明，以便看到它。

这非常有趣，因为您可以轻松添加HTML和CSS的自定义叠加层。但是，我不太清楚这里最好的方法是什么。

添加插件后，只需拨打QRScanner.scan(displayContents);，您就看不到任何内容，但扫描仪已在后台运行。然后我以递归方式从应用程序中删除任何样式（请参阅simplest way to remove all the styles in a page）并将background-color设置为透明以查看它是否有效。确实如此，但我显然仍然可以看到之前显示过的文字。

我想我可以创建并推送带有叠加层的新页面，将背景颜色设置为透明，然后在扫描代码后导航回来。但这感觉很酷。

有没有人有更好的解决方案？
例如，有没有办法交换＆＃34;交换＆＃34;应用程序的整个可见部分与覆盖图并在扫描代码后恢复状态？

感谢您的帮助。

编辑：

它不是同一个插件，但这篇文章与我的问题相关。

http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/

应用css样式有效，但同样，应用程序的其余部分无法使用。

Answer 1

@Andreas几周前我遇到了一些问题。以下是我修复它的方法：

1）首先，在你的主题/ variables.scss上创建一个名为lowOpacity的类，它必须是全局的，如果你在页面中创建它，那么动态地添加它将无法工作：

.lowOpacity {
  opacity: 0;
}

2）当您显示qrScanner时，您应该将该类应用于ion-app元素，并可选择注册后退按钮操作：

            this.qrScanner.show().then(()=>{
                let unregister = this.platform.registerBackButtonAction(()=>{
                    this.closeQrScanner();
                    unregister();
                });
                window.document.querySelector('ion-app').classList.add('lowOpacity');
            });

3）记得在qrScanner扫描了一些已关闭的内容后删除该类：

closeQrScanner() {
    this.qrScanner.hide().then(()=>{
        window.document.querySelector('ion-app').classList.remove('lowOpacity');
    }); // hide camera preview
}

ngOnDestroy() {
    this.closeQrScanner();
}

希望有所帮助

Answer 2

我不会让应用变得透明，因为我不明白这一点。相反，您只需在页面的div中显示相机的内容，并使用比包含相机图像的元素更高的z-index将其他HTML元素叠加在其上。

Answer 3

正如@vrijdenker所说，您应该将相机内容显示到正确的级别，并且不要奇怪地破解CSS。

为此，您可以远程调试您的应用程序以本地化相机容器并在其上应用一些CSS来修改z-index / display / etc.

Android上的远程调试：

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

iOS上的远程调试：

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

您可以在真实设备或模拟器上执行此操作

使ionic2 app完全透明的最佳方法是什么？

3 个答案: