玲琅滿目的二維碼在我們的都市和朋友圈中隨處可見，很多平臺都提供了定製二維碼的服務， 那麼作為一名程式設計師，我們如何自己實現一個簡單的二維碼生成器呢？接下來筆者就來帶大家一起利用Qrcode實現一個二維碼生成器。
效果預覽
由上圖可以看出我們可以自定義二維碼的：
文本(比如url, 一段文本)二維碼尺寸二維碼背景色二維碼前景色二維碼級別自定義二維碼中展示的icon以及icon的位置，大小在開發之前我們需要先了解：
什麼是QR Code碼Qrcode的基本用法以及如何設計一個健壯的組件筆者不會介紹二維碼的詳細實現原理，因為相關文章很多，我們從實用的角度出發來解決實際問題。
QR Code碼
QR Code碼，是由 Denso 公司於1994年9月研製的一種矩陣二維碼符號，它具有一維條碼及其它二維條碼所具有的信息容量大、可靠性高、可表示漢字及圖像多種文字信息、保密防偽性強等優點。
關於QR Code碼我們需要知道2個核心的知識，也就是 QR Code數據表示方法以及糾錯能力。
QR Code數據表示方法 : 深色模塊表示二進位"1"，淺色模塊表示二進位"0"。糾錯能力L級：約可糾錯7%的數據碼字M級：約可糾錯15%的數據碼字Q級：約可糾錯25%的數據碼字H級：約可糾錯30%的數據碼字了解以上兩個知識對於我們實現定製二維碼非常有幫助，在使用Qrcode這個插件時也會用到。
Qrcode基本使用記憶如何包裝成自定義受控組件
因為我們大多數項目目前都採用react或者vue開發了, 所以我們直接用對應的插件版本即可, 這裡筆者使用的是qrcode.react。
從使用量上看這個庫還是非常不錯的，我們只需要2-3步就可以快速利用它生成一個靜態二維碼。
要想實現一個二維碼生成器，首先我們需要能自定義二維碼的屬性，也就是筆者開頭列舉的幾項，所以這些屬性我們完全要從外部獲取，也就是說二維碼組件我們要做成受控的，如下：
由上圖我們得到了如下的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>
其實就需要用到我們強大的表單渲染器了，我們需要給qrcode組件對接一個表單編輯器，也就是下圖所示的FormEditor：
為了簡單起見筆者直接用H5-Dooring提供的FormEditor， 我們只需要寫如下json結構就可以自動生成一個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: '等級', type: 'Select', range: [ { key: 'L', text: '低', }, { key: 'M', text: '中', }, { key: 'Q', text: '良', }, { key: 'H', text: '高', }, ], }, { key: 'imgUrl', name: '二維碼圖標', type: 'Upload', isCrop: true, cropRate: 1, }, { key: 'imgW', name: '圖標寬度', type: 'Number', }, { key: 'imgH', name: '圖標高度', 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;
此時我們就能渲染出文章開頭的二維碼生成器了，我們可以定製自己喜歡的二維碼風格和icon。 編輯器中的等級選項也就是筆者在開頭介紹的QR Code的糾錯能力，我們可以自定義選擇我們需要的等級。
作者：徐小夕
連結：https://juejin.cn/post/6907479093101461512
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。