二维码已经成为现代生活中不可或缺的一部分，我们可以轻松地用它存储联系方式、拼接 URL、付款以及其他各种信息。而 jr-qrcode 是一个简单易用的 npm 包，可以非常快速地生成二维码，并且兼容大部分浏览器。本篇文章将会教你如何安装并使用这个包，并附带有完整的示例代码和说明。
安装 jr-qrcode
在使用 npm 包 jr-qrcode 之前，需要先在你的项目中安装它。打开终端，输入以下命令即可：
npm install jr-qrcode
安装完成后，就可以在项目中使用了。
生成二维码
接下来，我们将会通过一个实例来深入了解如何使用 jr-qrcode。在这个实例中，我们将会实现一个简单的网页，允许用户通过输入文本或 URL 生成二维码。
添加 HTML
首先，我们需要在 HTML 中创建输入框和按钮，用于输入文本或 URL。并且需要将 jr-qrcode 的包文件添加到项目中。
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ---------- ----- ---------------- ------- ---------------------- ------------------------------------------------- ------- ------ --------- --- ---------- ------ ----------- ----------- ------- --------------------------------- ---- ------------------ ------- -------
添加 JavaScript
然后需要添加 JavaScript 文件，用于实现生成二维码的逻辑。
-- -------------------- ---- -------
-------- -------- -
--- ----- - --------------------------------------
--- ------ - --- ---------------- -
----- ------
------ ----
------- ----
--------- - ----------
---------- - ----------
------------ - ---------------------
---
-在这个 JavaScript 中，我们首先获取了用户输入的文本或 URL，然后创建了一个新的 QRCode 实例，并且传入了相应的参数。
参数详解
text： 这个参数是必须的，它表示所需生成的二维码所包含的信息。可以是文本、URL 等。width： 生成的二维码的宽度。height： 生成的二维码的高度。colorDark： 生成的二维码的深色部分的颜色。colorLight： 生成的二维码的浅色部分的颜色。correctLevel： 生成的二维码的容错级别。可选值为：QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H，容错级别从低到高。
运行
现在，我们已经完成了这个应用程序的前端部分。通过在浏览器中打开 HTML，就可以看到能够输入文本或 URL，然后点击按钮生成二维码的功能。祝贺你，现在已经能够使用 jr-qrcode 生成二维码了！
总结
在这篇文章中，我们学习了如何使用 npm 包 jr-qrcode 生成二维码。我们首先学习了如何安装这个包，然后了解了如何使用它生成一个简单的应用程序。再次祝贺你，现在已经掌握了 jr-qrcode 的基础知识！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56790