扫码页面黑屏
1) src -> index.js。修改代码如下
<ion-app style="background: none transparent;"></ion-app>
2)src -> theme -> variables.scss
// qrScannerion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor { background: transparent none !important; .tabbar.show-tabbar{ opacity: 0; }}[app-viewport],[overlay-portal],[nav-viewport],[tab-portal],.nav-decor { display: none !important; background: none transparent !important;}html,body.transparent-body,.transparent-body,.transparent-body ion-app,.transparent-body .app-root,.transparent-body ion-nav,.transparent-body .ion-page,.transparent-body .nav-decor,.transparent-body ion-content,.transparent-body .viewscan,.transparent-body .fixed-content,.transparent-body .scroll-content { background-color: transparent !important; background: transparent none!important;}
多次扫码后摄像头发热的问题
this.qrScanner.hide(); // hide camerathis.qrScanner.destroy(); // destory camera
QR Scanner安卓不能扫码条形码问题
此问题乃是编码格式的问题,扩充编码格式即可解决。
解决办法: 全局搜索formatList。找到QRScanner.java文件,定位到458行。
formatList.add(BarcodeFormat.UPC_A);formatList.add(BarcodeFormat.UPC_E);formatList.add(BarcodeFormat.EAN_13);formatList.add(BarcodeFormat.EAN_8);formatList.add(BarcodeFormat.CODE_39);formatList.add(BarcodeFormat.CODE_93);formatList.add(BarcodeFormat.CODE_128);formatList.add(BarcodeFormat.ITF);formatList.add(BarcodeFormat.DATA_MATRIX);
修改源代码后。要重新构建安卓平台
ionic cordova platform remove androidionic cordova platform add android
QR Scanner IOS不能扫码条形码问题
此问题乃是编码格式的问题,扩充编码格式即可解决。
解决办法:全局搜索metadataObjectTypes,找到QRScanner.swift文件,定位到156H
metaOutput!.metadataObjectTypes = [AVMetadataObjectTypeQRCode, AVMetadataObjectTypeEAN13Code, AVMetadataObjectTypeEAN8Code, AVMetadataObjectTypeCode128Code, AVMetadataObjectTypeInterleaved2of5Code]
定位到241H
if [AVMetadataObjectTypeQRCode, AVMetadataObjectTypeEAN13Code, AVMetadataObjectTypeEAN8Code, AVMetadataObjectTypeCode128Code, AVMetadataObjectTypeInterleaved2of5Code].contains(found.type) && found.stringValue != nil { scanning = false let pluginResult = CDVPluginResult(status: CDVCommandStatus_OK, messageAs: found.stringValue) commandDelegate!.send(pluginResult, callbackId: nextScanningCommand?.callbackId!) nextScanningCommand = nil}
cordova-plugin-crosswalk-webview插件与QR插件冲突,导致黑屏
src -> index.js。修改代码如下
<preference name="CrosswalkAnimatable" value="true" />
第一次进入扫描页面时页面没有透明,第二次正常
把代码放入ionViewDidEnter。当进入页面时触发
ionViewDidEnter() { (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView'); this.isShow = true; var cs = (window.document.querySelector('ion-app') as HTMLElement).classList.contains('cameraView'); console.log(cs); }}