使用ionic2开发一个二维码扫描功能

Posted 石曼迪分享

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ionic2开发一个二维码扫描功能相关的知识,希望对你有一定的参考价值。

界面添加一个按钮:

<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装上就行,扫描效果还是很好的。

以上是关于使用ionic2开发一个二维码扫描功能的主要内容,如果未能解决你的问题,请参考以下文章

Ionic2学习笔记(10):扫描二维码

hbuilder 混合app开发扫描二维码功能例子

html5怎么做扫描二维码的功能

MAUI条形码,二维码扫描功能

MAUI条形码,二维码扫描功能

MAUI条形码,二维码扫描功能