1. The black screen of scanning code page

1) src-> index.js. Modify the code as follows

<ion-app style="background: none transparent;" ></ion-app>

2) src-> theme-> variables.scss

// qrScanner ion-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; }

Camera heating problem after multiple code scanning

this.qrScanner.hide(); // hide camera
this.qrScanner.destroy();  // destory camera

2 QR Scanner Android does not scan barcodes

This problem is the problem of encoding format, which can be solved by extending the encoding format. Solution: Global search for FormatList. Locate the QRScanner. Java file to line 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);

After modifying the source code. You have to rebuild the Android platform

ionic cordova platform remove android
ionic cordova platform add android

3 QR Scanner iOS does not scan barcodes

This problem is the problem of encoding format, which can be solved by extending the encoding format. Solution: Search for MetadataObjectTypes globally, locate the QRScanner. Swift file, and locate it to 156H

metaOutput! .metadataObjectTypes = [AVMetadataObjectTypeQRCode, AVMetadataObjectTypeEAN13Code, AVMetadataObjectTypeEAN8Code, AVMetadataObjectTypeCode128Code, AVMetadataObjectTypeInterleaved2of5Code]

Positioning to 241 h

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 }

4. The cordova-plugin-crosswalk-webview plugin conflicts with the QR plugin, resulting in a black screen

SRC – > index. Js. Modify the code as follows

<preference name="CrosswalkAnimatable" value="true" />

5. The page is not transparent when entering the scanned page for the first time, but normal for the second time

Put the code in the ionviewDidEnter. Triggered when you enter the page

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