Question

我希望在我的离子页面的下半部分有一个条形码扫描仪部分，目前有一个按钮，点击哪个条形码扫描仪UI出现。我不想再去另一个屏幕并获得回调。有什么建议吗？

Answer 1

可以使用https://ionicframework.com/docs/native/qr-scanner/完成此操作要添加条形码扫描支持，您可以遵循https://github.com/bitpay/cordova-plugin-qrscanner/issues/132，我还没有完成这一部分，但是通过执行以下操作，可以实现一半的相机和一半的离子页面。

scanQRCode() {
    this.qrScanner.prepare().then((status: QRScannerStatus) => {
      if (status.authorized) {
        this.qrScanner.show();
        this.scanning = true;
        window.document.querySelector('.app-root').classList.add('transparentBody');
        let scanSub = this.qrScanner.scan().subscribe((text: string) => {
          scanSub.unsubscribe(); // stop scanning
          this.closeScanner(true);
          this.scanning = false;
          console.log(text);
        });
      } else if (status.denied) {
        // camera permission was permanently denied
        // you must use QRScanner.openSettings() method to guide the user to the settings page
        // then they can grant the permission from there
      } else {
        // permission was denied, but not permanently. You can ask for permission again at a later time.
      }
    }).catch((e: any) => {
      // console.log('Error is', e);
    });
}

closeScanner() {
    this.scanning = false;
    let app_root = window.document.querySelector('.app-root');
    if (app_root) {
      app_root.classList.remove('transparentBody');
    }
    this.qrScanner.hide();
    this.qrScanner.destroy();
 }

这会将所需的css类transparentBody附加到app-root类以隐藏视图，并分别将其带回。（这放置在app.scss中）

.transparentBody {
   background: transparent !important;
   background-color: transparent !important;
}

在我的模板中，我有以下

<ng-container *ngIf="scanning === true">
   <div class="qrcode-container" [style.height]="'100vh'">
      <img src="assets/icon/qr-scan.svg" class="qr-code-sight"/>
      <div>
         <div>
            <button icon-only (tap)="closeScanner()">
               <ion-icon name="ios-close-circle-outline"></ion-icon>
            </button>
         </div>
      </div>
   </div>
</ng-container>

我在扫描时还对页面离子含量应用了透明主体

<ion-content [ngClass]="{'transparentBody': scanning}"> ... </ion-content>

最后，我得到了覆盖相机的QR码，但您可以将页面的高度减半并将所需的任何内容放置在此处。

条形码扫描仪作为页面离子3的一部分

1 个答案: