玲琅滿目的二維碼在我們的都市和朋友圈中隨處可見, 很多平臺都提供了定製二維碼的服務, 那麼作為一名程式設計師, 我們如何自己實現一個簡單的二維碼生成器呢? 接下來筆者就來帶大家一起利用Qrcode實現一個二維碼生成器.
在開發之前我們需要先了解:
筆者不會介紹二維碼的詳細實現原理, 因為相關文章很多, 我們從實用的角度出發來解決實際問題.
QR Code碼QR Code碼，是由 Denso 公司於1994年9月研製的一種矩陣二維碼符號，它具有一維條碼及其它二維條碼所具有的信息容量大、可靠性高、可表示漢字及圖象多種文字信息、保密防偽性強等優點。關於QR Code碼我們需要知道2個核心的知識, 也就是 QR Code數據表示方法以及糾錯能力.
QR Code數據表示方法 : 深色模塊表示二進位"1"，淺色模塊表示二進位"0"。了解以上兩個知識對於我們實現定製二維碼非常由幫助. 在使用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編輯器 | 更新二維碼生成器組件覺得有用 ？喜歡就收藏，順便點個讚吧，你的支持是我最大的鼓勵！微信搜 「趣談前端」，發現更多有趣的H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰.