ionic QR Scanner常見問題解決

掃碼頁面黑屏

1) src -> index.js。修改代碼以下

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

屢次掃碼後攝像頭髮熱的問題

this.qrScanner.hide(); // hide camera
this.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 android
ionic 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);
    }
}