效果預覽

關於QR Code碼我們需要知道2個核心的知識, 也就是 QR Code資料表示方法以及糾錯能力.

QR Code資料表示方法 : 深色模組表示二進位制"1"，淺色模組表示二進位制"0"。糾錯能力 L級：約可糾錯7%的資料碼字 M級：約可糾錯15%的資料碼字 Q級：約可糾錯25%的資料碼字 H級：約可糾錯30%的資料碼字

瞭解以上兩個知識對於我們實現定製二維碼非常有幫助. 在使用Qrcode這個外掛時也會用到.

Qrcode基本使用記憶如何包裝成自定義受控元件

因為我們大多數專案目前都採用react或者vue開發了, 所以我們直接用對應的外掛版本即可, 這裡筆者使用的是qrcode.react.

由上圖我們得到了如下的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的糾錯能力, 我們可以自定義選擇我們需要的等級.

往期推薦

覆盤node專案中遇到的13+常見問題和解決方案

如何搭積木式的快速開發H5頁面?

手擼一個線上css三角形生成器

前端高效開發必備的 js 庫梳理