ionic3二维码功能(生成二维码)

生成二维码

方法一：qrcanvas(支持中文)

1. 安装依赖:

     npm i qrcanvas --save

2. 新建一个组件Component，通过这个组件来提供生成二维码的能力

    ionic g component qrcode

3. 在qrcode包下新增一个qrcode.module.ts文件，文件及文件内容如下：

qrcode

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {QrcodeComponent} from "./qrcode";
@NgModule({
  declarations: [
    QrcodeComponent,
  ],
  imports: [
    IonicPageModule.forChild(QrcodeComponent)
  ],
  exports: [
    QrcodeComponent
  ]
})
export class I2fQrCodeModule {
}

4. 编写qrcode.ts文件代码实现二维码生成，代码如下：

import {AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges} from '@angular/core';
import qrcanvas from 'qrcanvas';
@Component({
  selector: 'i2f-qrcode',
  templateUrl: 'qrcode.html'
})
export class QrcodeComponent implements AfterViewInit, OnChanges {
  options: any;
  effects = ['none', 'liquid', 'round', 'spot'];
  @Input() size: string;
  @Input() data: string;
  @Input() logo: string;

  constructor(private elementRef: ElementRef) {
  }
  ngAfterViewInit() {
  }
  ngOnChanges(changes: SimpleChanges) {
    if (
      'backgroundAlpha' in changes ||
      'foregroundAlpha' in changes ||
      'mime' in changes ||
      'padding' in changes ||
      'size' in changes ||
      'data' in changes ||
      'logo' in changes ||
      'canvas' in changes) {
      this.generateQrCode();
    }
  }
  generateQrCode() {
    let innerHTML = '';
    this.elementRef.nativeElement.querySelector('#qrcode').innerHTML = innerHTML;
    this.options = {
      cellSize: 8,
      size: this.size,
      correctLevel: 'H',
      data: this.data,
      effect: {
        key: 'none',
        value: 1,
      }
    };
    this.options.effect.key = this.effects[Math.floor(Math.random() * this.effects.length)];
    if (this.logo) {
      let image = new Image();
      image.src = this.logo;
      this.options.logo = {
        image,
        size: 10 / 100
      };
      image.onload = () => {
        const canvas = qrcanvas(this.options);
        this.elementRef.nativeElement.querySelector('#qrcode').appendChild(canvas);
      };
    } else {
      const canvas = qrcanvas(this.options);
      this.elementRef.nativeElement.querySelector('#qrcode').appendChild(canvas);
    }
  }
}

5. 编写页面qrcode.html，代码如下：

<div id="qrcode" (click)="generateQrCode()"></div>

6. 使用I2f-qrcode生成二维码：

在页面中：

    <i2f-qrcode [data]="'中文'" [size]="180" [logo]="'assets/img/logo.png'" ></i2f-qrcode>

在module.ts中引入

  imports: [
    IonicPageModule.forChild(QrCodePage),
    I2fQrCodeModule
  ],

7. 结果展示

image.png

方法二. angular2-qrcode(不支持中文)

1. 安装npm依赖:

npm install angular2-qrcode --save

2. 在app.module.ts中引入QrCodeModule模块

import { QRCodeModule } from 'angular2-qrcode';

imports: [... QRCodeModule... ],

3. 在实际调用页面的module.ts中引入QRCodeModule,并在页面中以指令方式使用

imports: [QRCodeModule],

<qr-code [value]="qrCodeValue"></qr-code>  

qrCodValue是一个变量，也可以是一个写死的值。

1. 可选参数: