境搭建

1. 使用ng new cc-qrcode 创建一个项目

ng new cc-qrcode

开发组件

1. 在项目src/app/shard目录中，使用命令ng g module qrcode 创建一个qrcode模块。

ng g module qrcode

2.在项目src/app/shard(shard自己创建一个目录)目录中，使用命令ng g component qrcode创建一个qrcode组件，删除没用的qrcode.component.html和qrcode.component.xxx样式文件，因为我们这个二维码组件不需要这个，只要有ts里面实现就可以了，所以删除！！！

ng g component qrcode

3.由于我们的组件依赖于第三方的qrious插件，所以需要通过npm install qrious --save安装。

npm install qrious --save

4.在之前创建的qrcode.component.ts中，实现二维码，具体的内容如下。

//这里引入的是angular模块的内容

import { Component, OnInit, Input, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';

//这里引入我们安装的第三方二维插件

import QRious from 'qrious';

/**

* 二维码

*/

@Component({

selector: 'cc-qrcode',

template: `` //这里不需求模板，所以放空，如果觉得这个不好看，可以使用指令的方式实现

})

export class QrcodeComponent implements OnChanges, OnDestroy {//这里实现了OnChanges与OnDestroy接口，一个是用于监听参数改变用的，一个是销毁组件用的

// 二维码值参数

@Input() value='';

// 二维码背景颜色，默认我们给个白色

@Input() background='white';

// 二维码前景色，也就是图案的颜色，默认我们给个黑色

@Input() foreground='black';

// 二维码背景透明度，取值范围是0-1.0之间

@Input() backgroundAlpha=1.0;

// 二维码前景的透明度，取值范围是0-1.0之间

@Input() foregroundAlpha=1.0;

// 二维码的误差校正级别(L, M, Q, H)

@Input() level='L';

// 生成的图片类型，默认image/png

@Input() mime='image/png';

// 内边距

@Input() padding=0;

// 二维码大小（宽高）

@Input() size=100;

// 是否使用画布生成，默认为false，图片方式

@Input() canvas=false;

// 二维码实例对象

qr: QRious;

constructor(private elementRef: ElementRef) { }

ngOnChanges(changes: SimpleChanges): void {

//这里判断参数是否改变

if (changes.background || changes.backgroundAlpha || changes.foreground ||

changes.foregroundAlpha || changes.level || changes.mime ||

changes.padding || changes.size || changes.value || changes.canvas) {

this.qrcodedBuild();

}

}

//二维码构造的方法

qrcodedBuild(): void {

// 这里获取元素对象

const element: HTMLElement=this.elementRef.nativeElement;

//清空里面的内容

element.innerHTML='';

// 为二维码插件初始化

this.qr=new QRious({

background: this.background,

backgroundAlpha: this.backgroundAlpha,

foreground: this.foreground,

foregroundAlpha: this.foregroundAlpha,

level: this.level,

mime: this.mime,

padding: this.padding,

size: this.size,

value: this.value

});

// 判断是否需要使用画布的方式，默认使用的是图片方式

if (this.canvas) {

element.appendChild(this.qr.canvas);

} else {

element.appendChild(this.qr.image);

}

}

// 将二维码转换成base64编码

toDataURL(): string {

return this.qr.toDataURL();

}

// 这里要销毁组件

ngOnDestroy() {

this.qr=null;

}

}

组件的使用

1.使用时只需要引入模块，然后就可直接在html中使用了