PS：此文章只谈自己对开发过程中的思考，不谈计算问题。

不知道你们有没有遇到过这种情况：在开发网站时有时候需要向用户展示二维码，但是市面上的二维码插件一般都是JS调用，需要自己对他初始化。有时候在业务场景中，用户可能关闭弹出层或者超时需要重新渲染二维码，还有时候一个网页需要同时展示多个二维码。这就让这种调用方式十分笨拙。因为二维码算法可能只是提供二维数组信息或者只是初始化成简单的黑白两色。这样的方式不方便又不美观。

于是我就在想，能不能像引用图片一样简单呢？只需要改变图片地址，用户看到的效果就是一张全新的二维码图片！改属性就是改二维码内容，开发人员布局这个元素和正常图片无异，CSS可以直接控制它的宽高。

我想，现在的前端开发早就走向组件化了，那么这个二维码一定需要以Web组件的形式使用。而现在各种前端框架横行，React、Vue等等，我想既然做了，不能只针对一个框架写。同时这个组件本身不复杂，一个文件引用足矣。于是，我选定了Web Components这款，让浏览器原生支持它，就开始了开发<widget-qrcode>这个组件。

二维码二维数组的生成，我是直接复制qrcode.js的代码。因为觉得这本身成熟了，没必要从头再来，我关注的是自己需要解决的应用痛点。即“易用”和“美观”。

组件的使用很简单，对value属性进行赋值，就是对二维码内容进行修改。

<widget-qrcode value="https://passer-by.com/"></widget-code>

二维码的组成

为了介绍二维码组件的使用，需要额外提到二维码的组成。它包括了内容区和码眼。码眼的作用在于对二维码进行定位判定，否则，当一张二维码图片随意翻转的时候，程序无法分清上下左右。而内容区，就是你输入的内容通过复杂的计算用黑白形式编码出来的，里面包含了校验容错部分。黑白的明暗变化（即前景色和背景色），对于解码程序来说就是信息。也就是说，我们做出来的二维码并不需要拘泥于黑白两色和方形的外观，同时还可以有一定面积的信息遮挡。

关于二维码美化

要对二维码进行美化，就需要可以对前景色和背景色进行自定义设置。既然是美化，配色不能再只有两种了吧？就像之前说的，对于二维码解码程序来说，颜色只有深浅之分，解码程序会自己对二维码进行去色再二值化处理。那么，让用户可以自行设置多种颜色就是必须的啦。

同时为了保证多样化，需要对二维码外形进行变化。同时如果过于开放又没法保证它"易用性"的定位，我不想让自己做的这个组件因为它难用而没人爱用。于是，我把对外形的控制设定为模板，用户只需要用我提供的几个模板即可。

为了保证内容的丰富，提高二维码的识别度，很多人会在二维码上部添加品牌logo。这样能在二维码上添加图片和文字就是必不可少的了！同时，文字还有自己的颜色可以配合二维码的配色。

二维码美化效果

你根据需要调整其他属性，如纠错等级、添加背景图片、前景图片、logo、悬浮文本等，以满足个性化的需求。

【仓库地址】https://github.com/mumuy/widget-qrcode/

【演示地址】https://passer-by.com/widget-qrcode/​

转自https://juejin.cn/post/7455999467525210139