前言
在前端开发中，生成二维码是一项常见的需求。在过去，如果想要生成二维码，我们需要手动编写一些实现逻辑，这不仅费时费力，而且容易出错。但是现在，我们可以使用一些优秀的 npm 包来轻松实现这个功能。今天，我要介绍的就是一个非常好用的 npm 包：wx-qrcode。
wx-qrcode 简介
wx-qrcode 是一款基于 canvas 和 jsqrcode 的微信小程序二维码生成库，已经被封装为 npm 包。
这个库不仅可以生成普通的二维码，还可以生成带有 logo 和颜色的二维码。
在使用 wx-qrcode 之前，你需要先了解一些 canvas 的基础知识，比如 canvas 的坐标系、渲染方式等等。
安装
你可以通过 npm 安装 wx-qrcode。在终端运行以下命令：
npm install --save wx-qrcode
使用
使用 wx-qrcode 很简单，只需要在项目中引入 wx-qrcode 包，然后通过 qrcode 构造函数生成一个实例。
import qrcode from 'wx-qrcode'
const qrcodeInstance = new qrcode({
// options
})options
在生成实例时，你可以传入一些参数，以便定制你的二维码。以下是可用的参数列表：
| 参数 | 类型 | 说明 |
|---|---|---|
el |
Element |
选填，指定渲染二维码的元素，默认为 canvas。 |
context |
Object |
选填，指定 canvas 上下文，如果未传入，则自动创建 2d 上下文。 |
text |
String |
必填，要生成的文本。 |
width |
Number |
选填，二维码的宽度。 |
height |
Number |
选填，二维码的高度。 |
correctLevel |
String |
选填，二维码容错级别，可选值为：L、M、Q、H，默认为 H 级别。 |
colorDark |
String |
选填，二维码颜色，深色部分的颜色，可接受的格式包括 hex、rgb、rgba、hsl、hsla。 |
colorLight |
String |
选填，二维码颜色，浅色部分的颜色，可接受的格式包括 hex、rgb、rgba、hsl、hsla。 |
logo |
String |
选填，二维码中嵌入的 logo 图片地址。 |
logoSize |
Number |
选填，二维码中嵌入的 logo 图片的大小（边长）。 |
logoRadius |
Number |
选填，二维码中嵌入的 logo 图片的圆角大小。 |
示例
下面是一个简单的示例，生成一个文本为 Hello, world! 的二维码，大小为 200*200，颜色为黑白。
-- -------------------- ---- ------- ------ ------ ---- ----------- ----- -------------- - --- -------- ----- ------- -------- ------ ---- ------- ---- ---------- ---------- ----------- ---------- --
结语
wx-qrcode 是一个非常好用的 npm 包，它使得生成二维码变得异常简单。如果你有生成二维码的需求，不妨试试使用 wx-qrcode，相信它一定不会让你失望。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671178dd3466f61ffe671