日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端:如何利用Qrcode制作一個二維碼生成器?

 玲瑯滿目的二維碼在我們的都市和朋友圈中隨處可見, 很多平臺都提供了定制二維碼的服務(wù), 那么作為一名程序員, 我們?nèi)绾巫约簩崿F(xiàn)一個簡單的二維碼生成器呢? 接下來筆者就來帶大家一起利用Qrcode實現(xiàn)一個二維碼生成器.

為南海等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及南海網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、網(wǎng)站制作、南海網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

效果預(yù)覽

由上圖可以看出我們可以自定義二維碼的:

  • 文本(比如url, 一段文本)
  • 二維碼尺寸
  • 二維碼背景色
  • 二維碼前景色
  • 二維碼級別
  • 自定義二維碼中展示的icon以及icon的位置, 大小

在開發(fā)之前我們需要先了解:

  • 什么是QR Code碼
  • Qrcode的基本用法
  • 以及如何設(shè)計一個健壯的組件

筆者不會介紹二維碼的詳細(xì)實現(xiàn)原理, 因為相關(guān)文章很多, 我們從實用的角度出發(fā)來解決實際問題.

QR Code碼

  • QR Code碼，是由 Denso 公司于1994年9月研制的一種矩陣二維碼符號，它具有一維條碼及其它二維條碼所具有的信息容量大、可靠性高、可表示漢字及圖象多種文字信息、保密防偽性強等優(yōu)點。

關(guān)于QR Code碼我們需要知道2個核心的知識, 也就是 QR Code數(shù)據(jù)表示方法以及糾錯能力.

  • QR Code數(shù)據(jù)表示方法 : 深色模塊表示二進制"1"，淺色模塊表示二進制"0"。
  • 糾錯能力

L級：約可糾錯7%的數(shù)據(jù)碼字

M級：約可糾錯15%的數(shù)據(jù)碼字

Q級：約可糾錯25%的數(shù)據(jù)碼字

H級：約可糾錯30%的數(shù)據(jù)碼字

了解以上兩個知識對于我們實現(xiàn)定制二維碼非常由幫助. 在使用Qrcode這個插件時也會用到.

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

因為我們大多數(shù)項目目前都采用react或者vue開發(fā)了, 所以我們直接用對應(yīng)的插件版本即可, 這里筆者使用的是qrcode.react.

從使用量上看這個庫還是非常不錯的, 我們只需要2-3步就可以快速利用它生成一個靜態(tài)二維碼.要想實現(xiàn)一個二維碼生成器, 首先我們需要能自定義二維碼的屬性, 也就是筆者開頭列舉的幾項, 所以這些屬性我們完全要從外部獲取, 也就是說二維碼組件我們要做成受控的, 如下:

由上圖我們得到了如下的react組件模式:

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3.

 其實就需要用到我們強大的表單渲染器了, 我們需要給qrcode組件對接一個表單編輯器, 也就是下圖所示的FormEditor:

為了簡單起見筆者直接用H5-Dooring提供的FormEditor, 我們只需要寫如下json結(jié)構(gòu)就可以自動生成一個Form編輯器, 如下:

 
 
 
 
    
  
  
  
  
  1. const Qrcode: IQrcodeSchema = {
    2. 
  
  
  
  
  2.   editData: [
    3. 
  
  
  
  
  3.     {
    4. 
  
  
  
  
  4.       key: 'url',
    5. 
  
  
  
  
  5.       name: 'url地址',
    6. 
  
  
  
  
  6.       type: 'Text',
    7. 
  
  
  
  
  7.     },
    8. 
  
  
  
  
  8.     {
    9. 
  
  
  
  
  9.       key: 'codeSize',
    10. 
  
  
  
  
  10.       name: '二維碼尺寸',
    11. 
  
  
  
  
  11.       type: 'Number',
    12. 
  
  
  
  
  12.     },
    13. 
  
  
  
  
  13.     {
    14. 
  
  
  
  
  14.       key: 'bgColor',
    15. 
  
  
  
  
  15.       name: '背景色',
    16. 
  
  
  
  
  16.       type: 'Color',
    17. 
  
  
  
  
  17.     },
    18. 
  
  
  
  
  18.     {
    19. 
  
  
  
  
  19.       key: 'fgColor',
    20. 
  
  
  
  
  20.       name: '前景色',
    21. 
  
  
  
  
  21.       type: 'Color',
    22. 
  
  
  
  
  22.     },
    23. 
  
  
  
  
  23.     {
    24. 
  
  
  
  
  24.       key: 'level',
    25. 
  
  
  
  
  25.       name: '等級',
    26. 
  
  
  
  
  26.       type: 'Select',
    27. 
  
  
  
  
  27.       range: [
    28. 
  
  
  
  
  28.         {
    29. 
  
  
  
  
  29.           key: 'L',
    30. 
  
  
  
  
  30.           text: '低',
    31. 
  
  
  
  
  31.         },
    32. 
  
  
  
  
  32.         {
    33. 
  
  
  
  
  33.           key: 'M',
    34. 
  
  
  
  
  34.           text: '中',
    35. 
  
  
  
  
  35.         },
    36. 
  
  
  
  
  36.         {
    37. 
  
  
  
  
  37.           key: 'Q',
    38. 
  
  
  
  
  38.           text: '良',
    39. 
  
  
  
  
  39.         },
    40. 
  
  
  
  
  40.         {
    41. 
  
  
  
  
  41.           key: 'H',
    42. 
  
  
  
  
  42.           text: '高',
    43. 
  
  
  
  
  43.         },
    44. 
  
  
  
  
  44.       ],
    45. 
  
  
  
  
  45.     },
    46. 
  
  
  
  
  46.     {
    47. 
  
  
  
  
  47.       key: 'imgUrl',
    48. 
  
  
  
  
  48.       name: '二維碼圖標(biāo)',
    49. 
  
  
  
  
  49.       type: 'Upload',
    50. 
  
  
  
  
  50.       isCrop: true,
    51. 
  
  
  
  
  51.       cropRate: 1,
    52. 
  
  
  
  
  52.     },
    53. 
  
  
  
  
  53.     {
    54. 
  
  
  
  
  54.       key: 'imgW',
    55. 
  
  
  
  
  55.       name: '圖標(biāo)寬度',
    56. 
  
  
  
  
  56.       type: 'Number',
    57. 
  
  
  
  
  57.     },
    58. 
  
  
  
  
  58.     {
    59. 
  
  
  
  
  59.       key: 'imgH',
    60. 
  
  
  
  
  60.       name: '圖標(biāo)高度',
    61. 
  
  
  
  
  61.       type: 'Number',
    62. 
  
  
  
  
  62.     },
    63. 
  
  
  
  
  63.   ],
    64. 
  
  
  
  
  64.   config: {
    65. 
  
  
  
  
  65.     url: 'https://github.com/MrXujiang/h5-Dooring',
    66. 
  
  
  
  
  66.     codeSize: 180,
    67. 
  
  
  
  
  67.     bgColor: 'rgba(255,255,255,1)',
    68. 
  
  
  
  
  68.     fgColor: 'rgba(0,0,0,1)',
    69. 
  
  
  
  
  69.     level: 'L',
    70. 
  
  
  
  
  70.     imgUrl: [
    71. 
  
  
  
  
  71.       {
    72. 
  
  
  
  
  72.         uid: '001',
    73. 
  
  
  
  
  73.         name: 'image.png',
    74. 
  
  
  
  
  74.         status: 'done',
    75. 
  
  
  
  
  75.         url: `http://xxxx.jpg`,
    76. 
  
  
  
  
  76.       },
    77. 
  
  
  
  
  77.     ],
    78. 
  
  
  
  
  78.     imgW: 48,
    79. 
  
  
  
  
  79.     imgH: 12
    80. 
  
  
  
  
  80.   },
    81. 
  
  
  
  
  81. };
    82. 
  
  
  
  
  82. 
  
  
  
  
  83. export default Qrcode;
    84.

此時我們就能渲染出文章開頭的二維碼生成器了, 我們可以定制自己喜歡的二維碼風(fēng)格和icon. 編輯器中的等級選項也就是筆者在開頭介紹的QR Code的糾錯能力, 我們可以自定義選擇我們需要的等級.

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


文章標(biāo)題：前端:如何利用Qrcode制作一個二維碼生成器?
本文鏈接：http://www.5511xx.com/article/copicsj.html