Question

让我成为ionic的新手，并在在线学习ionic之后创建一个基本的移动应用。

我创建了一个客户详细信息表单页面，客户需要在其中输入他们的详细信息，例如姓名，性别，出生日期，城市等。

我希望将QR Scanner放置在页面中，而不是手动输入详细信息，以便在扫描Aadhaar或任何其他条形码详细信息保护程序QR码时，需要自动填写客户详细信息。

下面是代码

    <ion-content>
    <ion-item>
    <ion-label position="floating" >Full Name</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >DOB</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >Gender</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >Address</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >State</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >District</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >City</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >Postal Code</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>

我尝试安装离子Qr扫描仪插件

ionic cordova plugin add cordova-plugin-qrscanner
 npm install @ionic-native/qr-scanner

但是不知道如何进一步进行。请帮我解决这个问题，我从最近的10天就得到了结构谢谢

Answer 1

看看我的扫描QR码的代码（离子4）老实说，我更喜欢条形码扫描仪而不是二维码扫描仪，而且结果基本相同。

https://ionicframework.com/docs/native/barcode-scanner

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Platform, AlertController } from '@ionic/angular';
import { DatabaseService} from '../../providers/database/database.service';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  current:any;
  constructor(
    private platform: Platform,
    private router: Router,
    public db: DatabaseService,
    public barcodeScanner: BarcodeScanner,
    private alertController: AlertController
  )
  {}
  scan()
  {
    this.barcodeScanner.scan().then(barcodeData => {
      if(barcodeData.cancelled)
      {
        return
      }
      this.db.checkQRCode(barcodeData.text)
      .then(doc => {
      })
     }).catch(err => {
         console.log('Error', err);
     });
  }
}

用于离子项目的QR码扫描仪可自动填充详细信息

1 个答案: