时间戳

首页 > 解决方案 > 在 ionic 3 中以编程方式打开条形码扫描仪

angular - 在 ionic 3 中以编程方式打开条形码扫描仪

问题描述

我是 ionic 方面的新手。我正在制作二维码生成器和条形码扫描仪应用程序。我已经制作并显示了扫描的数据，但我想在扫描仪上自动显示该数据。代码如下。

qr.html

<button ion-button full icon-left (click)="createCode()"><ion-icon name="barcode"></ion-icon>Code Generator</button>
<button ion-button full icon-left (click)="scanCode()"><ion-icon name="qr-scanner"></ion-icon>Scanner</button>

<ion-card *ngIf="createdCode">
    <ngx-qrcode [qrc-value]="createdCode"></ngx-qrcode>
    <ion-card-content>
      <p>Value: {{ createdCode }}</p>
    </ion-card-content>
  </ion-card>

 <ion-card *ngIf="scannedCode">
 <ion-card-content>
  <p>Value : {{ scannedCode }}</p>
 </ion-card-content>
 </ion-card>

qr.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@IonicPage()
@Component({
selector: 'page-qr',
templateUrl: 'qr.html',
})
export class QrPage {

qrData=JSON.parse(localStorage.getItem('response'));
createdCode=null;
scannedCode=null;

constructor(public navCtrl: NavController, public navParams: NavParams, private barcodeScanner: BarcodeScanner) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad QrPage');
}

createCode() {
this.createdCode=this.qrData;
}

scanCode() {
this.barcodeScanner.scan().then(barcodeData=>{
  this.scannedCode=barcodeData.text; //save scanned code
})
}
}

单击扫描按钮一次后。扫描代码显示几秒钟后自动打开扫描仪。这个过程一直持续到我点击设备的后退按钮。我是怎么做的？请帮我。谢谢。

标签： angularionic3

解决方案

推荐阅读