境搭建

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中使用了