前端: 如何利用Qrcode制作一個(gè)二維碼生成器?
玲瑯滿目的二維碼在我們的都市和朋友圈中隨處可見(jiàn), 很多平臺(tái)都提供了定制二維碼的服務(wù), 那么作為一名程序員, 我們?nèi)绾巫约簩?shí)現(xiàn)一個(gè)簡(jiǎn)單的二維碼生成器呢? 接下來(lái)筆者就來(lái)帶大家一起利用Qrcode實(shí)現(xiàn)一個(gè)二維碼生成器.
效果預(yù)覽
由上圖可以看出我們可以自定義二維碼的:
- 文本(比如url, 一段文本)
- 二維碼尺寸
- 二維碼背景色
- 二維碼前景色
- 二維碼級(jí)別
- 自定義二維碼中展示的icon以及icon的位置, 大小
在開(kāi)發(fā)之前我們需要先了解:
- 什么是QR Code碼
- Qrcode的基本用法
- 以及如何設(shè)計(jì)一個(gè)健壯的組件
筆者不會(huì)介紹二維碼的詳細(xì)實(shí)現(xiàn)原理, 因?yàn)橄嚓P(guān)文章很多, 我們從實(shí)用的角度出發(fā)來(lái)解決實(shí)際問(wèn)題.
QR Code碼
- QR Code碼，是由 Denso 公司于1994年9月研制的一種矩陣二維碼符號(hào)，它具有一維條碼及其它二維條碼所具有的信息容量大、可靠性高、可表示漢字及圖象多種文字信息、保密防偽性強(qiáng)等優(yōu)點(diǎn)。
關(guān)于QR Code碼我們需要知道2個(gè)核心的知識(shí), 也就是 QR Code數(shù)據(jù)表示方法以及糾錯(cuò)能力.
- QR Code數(shù)據(jù)表示方法 : 深色模塊表示二進(jìn)制"1"，淺色模塊表示二進(jìn)制"0"。
- 糾錯(cuò)能力
L級(jí)：約可糾錯(cuò)7%的數(shù)據(jù)碼字
M級(jí)：約可糾錯(cuò)15%的數(shù)據(jù)碼字
Q級(jí)：約可糾錯(cuò)25%的數(shù)據(jù)碼字
H級(jí)：約可糾錯(cuò)30%的數(shù)據(jù)碼字
了解以上兩個(gè)知識(shí)對(duì)于我們實(shí)現(xiàn)定制二維碼非常由幫助. 在使用Qrcode這個(gè)插件時(shí)也會(huì)用到.
Qrcode基本使用記憶如何包裝成自定義受控組件
因?yàn)槲覀兇蠖鄶?shù)項(xiàng)目目前都采用react或者vue開(kāi)發(fā)了, 所以我們直接用對(duì)應(yīng)的插件版本即可, 這里筆者使用的是qrcode.react.
從使用量上看這個(gè)庫(kù)還是非常不錯(cuò)的, 我們只需要2-3步就可以快速利用它生成一個(gè)靜態(tài)二維碼.要想實(shí)現(xiàn)一個(gè)二維碼生成器, 首先我們需要能自定義二維碼的屬性, 也就是筆者開(kāi)頭列舉的幾項(xiàng), 所以這些屬性我們完全要從外部獲取, 也就是說(shuō)二維碼組件我們要做成受控的, 如下:
由上圖我們得到了如下的react組件模式:
- <div className={styles.codeWrap}>
- <QRCode value={url} size={codeSize} bgColor={bgColor} fgColor={fgColor} imageSettings={{src: imgUrl[0].url, x: null, y: null, excavate: true, height: imgH, width: imgW}} />
- </div>
其實(shí)就需要用到我們強(qiáng)大的表單渲染器了, 我們需要給qrcode組件對(duì)接一個(gè)表單編輯器, 也就是下圖所示的FormEditor:
為了簡(jiǎn)單起見(jiàn)筆者直接用H5-Dooring提供的FormEditor, 我們只需要寫(xiě)如下json結(jié)構(gòu)就可以自動(dòng)生成一個(gè)Form編輯器, 如下:
- const Qrcode: IQrcodeSchema = {
- editData: [
- {
- key: 'url',
- name: 'url地址',
- type: 'Text',
- },
- {
- key: 'codeSize',
- name: '二維碼尺寸',
- type: 'Number',
- },
- {
- key: 'bgColor',
- name: '背景色',
- type: 'Color',
- },
- {
- key: 'fgColor',
- name: '前景色',
- type: 'Color',
- },
- {
- key: 'level',
- name: '等級(jí)',
- type: 'Select',
- range: [
- {
- key: 'L',
- text: '低',
- },
- {
- key: 'M',
- text: '中',
- },
- {
- key: 'Q',
- text: '良',
- },
- {
- key: 'H',
- text: '高',
- },
- ],
- },
- {
- key: 'imgUrl',
- name: '二維碼圖標(biāo)',
- type: 'Upload',
- isCrop: true,
- cropRate: 1,
- },
- {
- key: 'imgW',
- name: '圖標(biāo)寬度',
- type: 'Number',
- },
- {
- key: 'imgH',
- name: '圖標(biāo)高度',
- type: 'Number',
- },
- ],
- config: {
- url: 'https://github.com/MrXujiang/h5-Dooring',
- codeSize: 180,
- bgColor: 'rgba(255,255,255,1)',
- fgColor: 'rgba(0,0,0,1)',
- level: 'L',
- imgUrl: [
- {
- uid: '001',
- name: 'image.png',
- status: 'done',
- url: `http://xxxx.jpg`,
- },
- ],
- imgW: 48,
- imgH: 12
- },
- };
- export default Qrcode;
此時(shí)我們就能渲染出文章開(kāi)頭的二維碼生成器了, 我們可以定制自己喜歡的二維碼風(fēng)格和icon. 編輯器中的等級(jí)選項(xiàng)也就是筆者在開(kāi)頭介紹的QR Code的糾錯(cuò)能力, 我們可以自定義選擇我們需要的等級(jí).
目前筆者已經(jīng)把二維碼生成器集成到開(kāi)源項(xiàng)目H5-Dooring中了,在線把玩地址(電腦端體驗(yàn)更佳): H5編輯器 | 更新二維碼生成器組件
