使用ionic2開發一個二維碼掃描功能

石曼迪發表於2017-04-13

介面新增一個按鈕:

<button ion-button block color="secondary" class="Scan-button" (click)="scanQR()" [disabled]="loading">點我掃描</button>

 ts具體程式碼:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from "ionic-native";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
public scannedText: string;
  constructor(public navCtrl: NavController) {

  }
  public scanQR() {

    BarcodeScanner.scan().then((barcodeData) => {
      if (barcodeData.cancelled) {
        console.log("User cancelled the action!");
        return false;
      }
      console.log("Scanned successfully!");
      console.log(barcodeData);
      this.scannedText=JSON.stringify(barcodeData);
    }, (err) => {
      console.log(err);
    });
  }
}

 執行時會告訴你缺這個缺那個,只管npm install即可

然後編譯成apk的時候會提示沒有接受條款,其實是找不到依賴包,根據提示使用SDK Manager裝上就行,掃描效果還是很好的。

相關文章