玲瑯滿目的二維碼在我們的都市和朋友圈中隨處可見, 很多平臺都提供了定制二維碼的服務, 那么作為一名程序員, 我們如何自己實現一個簡單的二維碼生成器呢? 接下來筆者就來帶大家一起利用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的糾錯能力, 我們可以自定義選擇我們需要的等級.

目前筆者已經把二維碼生成器集成到開源項目H5-Dooring中了,在線把玩地址(電腦端體驗更佳): H5編輯器 | 更新二維碼生成器組件