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

简介: 生成二维码方法一:qrcanvas(支持中文)1. 安装依赖: npm i qrcanvas --save2. 新建一个组件Component,通过这个组件来提供生成二维码的能力 ionic g component qrcode3.

生成二维码

方法一:qrcanvas(支持中文)

1. 安装依赖:

     npm i qrcanvas --save

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

    ionic g component qrcode

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

img_67b229044a4895fda872ffca03ccda1a.png
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. 结果展示

img_a085bb552b917dfe8b542e1c43071aa7.png
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. 可选参数:

参数 类型 默认值 描述
value String '' Your data string
size Number 128 This is the height/width of your QR Code component
level String 'M' QR Correction level ('L', 'M', 'Q', 'H')
type Number 4 Buffer size for data string
background String 'white' The color for the background
backgroundAlpha Number 1.0 The opacity of the background
foreground String 'black' The color for the foreground
foregroundAlpha Number 1.0 The opacity of the foreground
mime String 'image/png' The mime type for the output image
padding Number null The padding around the QR Code
canvas Boolean false Will output a canvas element if true
相关文章
ionic3打包设置二维码下载页
ionic3打包设置二维码下载页
ionic3打包设置二维码下载页
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1405 0
|
Android开发 iOS开发
ionic3项目实战教程 - 第12讲 ionic3制作icon和splash
这一讲主要包含以下几个部分: 1.设计icon; 2.设计splash; 3.生成各个平台各个尺寸的icon和splash; 1.设计icon 来,打开你的PS,新建-文件,像素为1024*1024,背景透明,确定; .
1170 0
|
Web App开发
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分: 1.个人中心ts具体代码展示; 2.个人中心html具体代码展示; 3.
1367 0
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。
1088 0
|
Web App开发
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
这一讲主要包含以下几个部分: 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.
1063 0
|
Web App开发
ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用
这一讲主要实现商品的"抢购"功能 1.安装ThemeableBrowser插件; 2.使用ThemeableBrowser插件; 1.安装插件 分别执行以下命令: ionic cordova plugin add cordova-plugin-t...
1444 0
ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现
这一讲主要包含以下几个部分: 1.创建商品列表页 2.根据分类获取商品列表 2.展示商品列表 1.创建商品列表页 执行 ionic g page product-list 7-1.
871 0
ionic3项目实战教程 - 第5讲 ionic3商城首页透明导航栏设计
这一讲主要包含以下几个部分 1.配置APP主色调; 2.设置ion-content组建的fullscreen属性; 3.设计透明导航栏 配置APP主色调; 找到src/theme/variables.
1331 0
|
Go
ionic3项目实战教程 - 第4讲 ionic3商城首页设计(幻灯片+图标分类)
商城首页主要包含以下几个部分 1.使用ion-slide实现首页幻灯片; 2.使用ion-grid实现商品分类; 3.使用ion-list实现商品列表; 说一下实现思路 1.先获取网络请求的数据,查看数据结构; 2.根据数据结构来判断需要展示的数据,编写html; 3.调整界面样式,编写scss; 准备工作 开始之前请到阿里开源图标库准备首页需要的小图标,不想自己找的同学,在文章最后的交流群的群文件里有导出好的资源小图标,下载后直接放到项目的src/assets/icon/目录中即可。
1132 0