我最近遇到了一个名为cordova-plugin-qrscanner(
https://github.com/bitpay/cordova-plugin-qrscanner)的相当新的cordova插件.我以前一直在使用其他QR扫描仪,但这些只是覆盖某种原生相机UI,直到QR被扫描,然后返回到应用程序.
但是,这个插件的方法有点不同.实际上,相机显示在您的应用程序“后面”,您必须使所有内容都透明才能看到它.
这非常有趣,因为您可以使用HTML和CSS轻松添加自定义叠加层.但是,我不太清楚这里最好的方法是什么.
添加插件后,只需调用QRScanner.scan(displayContents);你看不到任何东西,但扫描仪已经在后台运行.然后,我从应用程序中递归删除任何样式(请参阅simplest way to remove all the styles in a page),并将background-color设置为透明,以查看它是否有效.它确实如此,但我显然仍然可以看到之前显示的文本.
我想我可以在其上创建并推送带有叠加层的新页面,将背景颜色设置为透明,然后在扫描代码后导航回来.但这感觉非常黑客.
有人有更好的解决方案吗？
例如,有没有办法用覆盖层“交换”应用程序的整个可见部分,并在扫描代码后恢复状态？
谢谢你的帮助.
编辑：
http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/
应用css样式有效,但同样,应用程序的其余部分不可用.
解决方法
@Andreas我几周前遇到了一些问题.以下是我修复它的方法：
1)首先,在你的theme / variables.scss上创建一个名为lowOpacity的类,它必须是全局的,如果你在页面的scss中创建它,动态添加它将不起作用：
.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');
});
closeQrScanner() {
this.qrScanner.hide().then(()=>{
window.document.querySelector('ion-app').classList.remove('lowOpacity');
}); // hide camera preview
}
ngOnDestroy() {
this.closeQrScanner();
}
希望能帮助到你
