如何在 React 中构建二维码生成器

创建快速响应 (QR) 代码生成器的想法是将数据从图像转换为文本。二维码只是将图像数据表示为文本，它有很多有用的应用，从餐厅菜单和音乐会门票，到在线日历邀请、支付等等。 在本教程中，您将学习如何使用 JavaScript 库 React 创建二维码。使用 React 的好处是它使构建前端应用程序变得轻而易举，因为它为开发人员提供了重用组件的方法。 要完成本教程，将涵盖以下内容： 先决条件 入门 创建二维码生成器 样式化 QR 码应用程序 下载生成的二维码 结论 资源 演示 先决条件 要完成本教程，您需要以下内容： 对 React.js 的基本了解 安装在本地机器上 Node >= 14.0.0 和 npm >= 5.6 入门 在编写一行代码之前，打开终端并运行以下命令： npx create-react-app qrcode-generator 上面的命令搭建了文件并安装了一些创建 React 应用程序所需的包。 接下来，导航到项目目录并运行可访问的开发服务器 使用以下命令在浏览器中预览应用程序： http://localhost:3000 npm start cd qrcode-generator 最后，让我们安装创建二维码生成器所需的依赖库。运行命令： npm install qrcode.react : 一个 React 组件，用于生成 QR 码以渲染到 DOM。 qrcode.react 创建二维码生成器 到目前为止的工作很棒！ QR 码生成器的创建将从创建包含 QR 码结构的文件和组件开始。在 src 目录中，创建一个名为 components 的文件夹，并在该文件夹中创建一个名为 QrCode.js 的文件。 复制并粘贴以下代码： e.preventDefault(); }; setUrl(e.target.value); }; ); ); }; // src/components/QrCode.js import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const downloadQRCode = ( e ) => { setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code export default QrCode; 上面的代码片段执行以下操作： 进口 用于声明变量的初始状态，设置为空字符串的 url 和 功能， 用于更新状态 useState setState setUrl 图书馆， , 用于渲染生成的二维码 qrcode.react 接下来，使用 附加的功能 的方法 元素，因为这是由提交事件触发的 downloadQRCode onSubmit 在 元素 带有函数的事件处理程序 接受用户的输入，获取它的值，并随着输入的每个新输入更改 QR 码 onChange 'qrCodeEncoder' 一个变量 被建造。它包含在 组件并传递一些可用的提示，这些提示可以自定义并使 QR 码在浏览器上可见。查看文档以了解有关在组件中 的更多信息 qrcode QRCodeCanvas 使用道具 最后， 元素被禁用，直到用户输入接收到数据 样式化 QR 码应用程序 在里面 文件夹，创建样式表， 负责应用程序的视觉吸引力 src styles.css 复制并粘贴以下代码： *, *:before, *:after { } } } } } } } } } } } } } } } /* src/styles.css */ margin: 0 ; padding : 0 ; box-sizing : border-box; :root { -- font - color : 230 35% 7% ; body { color : hsl ( var (--font-color)); img { max-width : 100% ; display : block; .section { padding : 2em 0 ; display : flex; min-height : 100vh ; align-items : center; .container { margin -inline: auto; max-width : 75rem ; width : 85% ; .input__group { display : flex; margin-top : 2em ; input { width : 100% ; padding : 1em 0.75em ; border : 1px solid #444343 ; border-radius : 3px ; margin-bottom : 2em ; margin-top : 0.75em ; button { border : unset; background : hsl ( 231 , 77% , 90% ); padding : 1em 0.75em ; color : hsl ( var (--font-color)); cursor : pointer; text-transform : uppercase; font-weight : bold; @media screen and ( min-width : 768px ) { .section { padding : 0 ; input { margin : 0 ; .qrcode__container { display : flex; align-items : center; .input__group { margin-left : 3em ; input { margin-bottom : 2em ; margin-top : 0.75em ; font-size : 1rem ; 接下来，在应用的入口点 App.js 中导入 QrCode.js 文件和样式表： ); } // src/App.js import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) { return ( 完成这些步骤后，应用程序应如下所示： 下载生成的二维码 用户下载生成的二维码的选项使其在各种用例中都很有用。从打印代码到将其嵌入网站，用例是无限的。 回到 文件，让我们更新代码库以使用 访问文档对象模型 (DOM) 节点。 components/QrCode.js refs ... ); ); }; // src/components/QrCode.js import { useState, useRef } from "react" ; // other import const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); // include this: call the useRef function const qrcode = ( return ( {qrcode} {/* include this */} {/* form input container */} export default QrCode; 现在，让我们更新 中的功能 文件，以便能够单击下载二维码按钮并将画布保存为图像文件。 downloadQRCode QrCode.js e.preventDefault(); anchor.href = image; anchor.click(); }; ... ); }; // src/components/QrCode.js // imports const QrCode = () => { // state // useRef const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); return ( {qrcode} {/* form input container */} export default QrCode; 在里面 函数，发生以下情况： downloadQRCode 它使用 .current 属性引用 ref 对象的当前值，以了解节点何时更改 这 组件在 DOM 中生成 canvas 元素，使您能够动态创建内容 qrcode.react 画布附加到 将指定类型参数设置为文件格式的方法， toDataURL image/png 接下来是锚， 元素被创建并且 设置为点击按钮时下载二维码的图片 href 锚元素被附加到文档正文中，一旦下载了二维码，它就会被删除 最后，状态 url 更新为 提交表单时清除生成的二维码输入的变量 setUrl 组件 QrCode.js 的完整代码： e.preventDefault(); anchor.href = image; anchor.click(); }; setUrl(e.target.value); }; ); ); }; import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code export default QrCode; 应用程序的最终结果应如下所示： 结论 本教程描述了创建 QR 码生成器的过程以及如何下载它以供以后使用。 资源 二维码 锚元素 关于二维码