Ionic3 生成项目及扫描二维码

创建项目

ionic start devdacticQRCodes blank
cd devdacticQRCodes
// 安装插件
npm install ngx-qrcode2 --save
ionic cordova plugin add phonegap-plugin-barcodescanner
npm install --save @ionic-native/barcode-scanner

修改App.Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
// 引入插件
import { NgxQRCodeModule } from 'ngx-qrcode2';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
NgxQRCodeModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
BarcodeScanner
]
})
export class AppModule {}

修改 app/pages/home/home.html

<ion-header>
<ion-navbar>
<ion-title>
QR Code App
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<ion-item>
<ion-input type="text" placeholder="MY QR Code data" [(ngModel)]="qrData">
</ion-input>
</ion-item>
<!--添加按钮-->
<button ion-button full icon-left (click)="createCode()"><ion-icon name="barcode"></ion-icon>Create Code</button>
<button ion-button full icon-left (click)="scanCode()" color="secondary"><ion-icon name="qr-scanner"></ion-icon>Scan Code</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>
Result from Scan: {{ scannedCode }}
</ion-card-content>
</ion-card>
</ion-content>

home.ts

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

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
qrData = null;
createdCode = null;
scannedCode = null;

constructor(private barcodeScanner: BarcodeScanner) { }

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

scanCode() {
this.barcodeScanner.scan().then(barcodeData => {
this.scannedCode = barcodeData.text;
}, (err) => {
console.log('Error: ', err);
});
}

}

测试

生成二维码