前端：如何使用Qrcode制作二维码生成器？
时间：2023-03-18 00:17:06
科技观察
精美的二维码在我们的城市和朋友圈随处可见。很多平台都提供定制二维码服务，那么作为程序员，我们如何自己实现一个简单的二维码生成器呢？接下来笔者就带大家使用Qrcode实现一个二维码生成器。效果预览从上图可以看出，我们可以自定义二维码的：文字（比如url，一段文字），二维码大小，二维码背景色，二维码前景色，二维码层次，图标自定义二维码中显示的和图标的位置和大小，开发前需要了解大小:什么是QRCode,Qrcode的基本用法以及如何设计一个健壮的组件详细的实现原理作者就不介绍了二维码的，因为相关的文章很多，我们就从实际的角度来解决实际问题。QRCodeQRCode码是电装公司于1994年9月开发的一种矩阵式二维码符号，具有信息容量大、可靠性高，可以将各种汉字和图像表示为一维条码和其他二维条码。文字信息，防伪防伪优势强。关于QRCode码，我们需要了解两个核心知识，即QRCode数据表示方式和纠错能力。QRCode数据表示方式：深色块代表二进制“1”，浅色块代表二进制“0”。纠错能力LevelL：约7%的数据码字可纠错LevelM：约15%的数据码字可纠错LevelQ：约25%的数据码字可纠错%ofdatacodeword了解以上两个知识对于我们实现自定义二维码是很有帮助的。使用二维码插件时也会用到。qrcode基本上是用内存封装成一个自定义的受控组件，因为目前我们大部分的项目都是用react或者vue开发的，所以我们可以直接使用对应的插件版本，这里笔者使用的是qrcode.react。从使用的角度来说，这个库还是很不错的，我们只需要2-3步就可以快速使用它来生成静态二维码。实现一个二维码生成器，首先我们需要能够自定义二维码的属性，也就是笔者开头所列的那几项，所以我们必须从外部获取这些属性。也就是说，我们要把二维码组件做成可控的，如下：从上图我们得到如下react组件模式：
事实上我们需要使用我们强大的表单渲染器。我们需要在二维码组件上连接一个表单编辑器，也就是下图所示的FormEditor：为了简单起见，我直接使用H5-Dooring提供的FormEditor，我们只需要编写如下的json结构即可自动生成一个表单编辑器，如下：constQrcode:IQrcodeSchema={editData:[{key:'url',name:'url地址',type:'Text',},{key:'codeSize',name:'二维码大小',type:'Number',},{key:'bgColor',name:'backgroundcolor',type:'Color',},{key:'fgColor',name:'frontScenery',type:'Color',},{key:'level',name:'level',type:'Select',range:[{key:'L',text:'low',},{key:'M',text:'medium',},{key:'Q',text:'good',},{key:'H',text:'high',},],},{key:'imgUrl',name:'二维码图标',type:'上传',isCrop:true,cropRate:1,},{key:'imgW',name:'图标宽度',type:'Number',},{key:'imgH',name:'iconheight',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},};exportdefaultQrcode;此时我们就可以了文章开头的二维码生成器是渲染出来的，我们可以自定义自己喜欢的二维码样式和图标。编辑器中的等级选项就是笔者一开始介绍的二维码的纠错能力，我们可以自定义选择我们需要的等级。目前笔者已经将二维码生成器集成到开源项目H5-Dooring中，在线播放地址（电脑端体验更好）：H5编辑器|更新二维码生成器组件
