如何在 React 中构建二维码生成器 by@terieyenike
18,277 讀數

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

2022/07/01
8 分钟
经过 @terieyenike 18,277 讀數
tldt arrow
ZH
Read on Terminal Reader

太長; 讀書

创建快速响应 (QR) 代码生成器的想法是将数据从图像转换为文本。二维码只是将图像数据表示为文本,它有很多有用的应用,从餐厅菜单和音乐会门票,到在线日历邀请、支付等等。

Company Mentioned

Mention Thumbnail
featured image - 如何在 React 中构建二维码生成器
Teri Eyenike HackerNoon profile picture

@terieyenike

Teri Eyenike

I am a frontend developer with a particular interest in...

學到更多
LEARN MORE ABOUT @TERIEYENIKE'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

创建快速响应 (QR) 代码生成器的想法是将数据从图像转换为文本。二维码只是将图像数据表示为文本,它有很多有用的应用,从餐厅菜单和音乐会门票,到在线日历邀请、支付等等。

在本教程中,您将学习如何使用 JavaScript 库 React 创建二维码。使用 React 的好处是它使构建前端应用程序变得轻而易举,因为它为开发人员提供了重用组件的方法。

要完成本教程,将涵盖以下内容:

  • 先决条件
  • 入门
  • 创建二维码生成器
  • 样式化 QR 码应用程序
  • 下载生成的二维码
  • 结论
  • 资源

演示

先决条件

要完成本教程,您需要以下内容:

  • 对 React.js 的基本了解

入门

在编写一行代码之前,打开终端并运行以下命令:

 npx create-react-app qrcode-generator

上面的命令搭建了文件并安装了一些创建 React 应用程序所需的包。

接下来,导航到项目目录并运行可访问的开发服务器

http://localhost:3000
使用以下命令在浏览器中预览应用程序:

 cd qrcode-generator npm start

最后,让我们安装创建二维码生成器所需的依赖库。运行命令:

 npm install qrcode.react

 qrcode.react
: 一个 React 组件,用于生成 QR 码以渲染到 DOM。

创建二维码生成器

到目前为止的工作很棒!

QR 码生成器的创建将从创建包含 QR 码结构的文件和组件开始。在 src 目录中,创建一个名为 components 的文件夹,并在该文件夹中创建一个名为 QrCode.js 的文件。

复制并粘贴以下代码:

 // src/components/QrCode.js
import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const downloadQRCode = ( e ) => {  e.preventDefault();  setUrl( "" ); };  const qrCodeEncoder = ( e ) => {  setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
     />
          < button type = "submit" disabled = {!url} >
      Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

上面的代码片段执行以下操作:

  • 进口
    useState
    用于声明变量的初始状态,设置为空字符串的 url 和
    setState
    功能,
     setUrl
    用于更新状态
  • 图书馆,
     qrcode.react
    , 用于渲染生成的二维码
  • 接下来,使用
    downloadQRCode
    附加的功能
    onSubmit
    的方法
    <form>
    元素,因为这是由提交事件触发的
  • <input>
    元素
    onChange
    带有函数的事件处理程序
    'qrCodeEncoder'
    接受用户的输入,获取它的值,并随着输入的每个新输入更改 QR 码
  • 一个变量
    qrcode
    被建造。它包含在
    QRCodeCanvas
    组件并传递一些可用的提示,这些提示可以自定义并使 QR 码在浏览器上可见。查看文档以了解有关在组件中使用道具的更多信息
  • 最后,
     <button>
    元素被禁用,直到用户输入接收到数据

样式化 QR 码应用程序

在里面

src
文件夹,创建样式表,
 styles.css
负责应用程序的视觉吸引力

复制并粘贴以下代码:

 /* src/styles.css */
*, *:before, *:after { 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 (    < div className = "section container" >
      < QrCode />
    </ div >
 ); }

完成这些步骤后,应用程序应如下所示:

image

下载生成的二维码

用户下载生成的二维码的选项使其在各种用例中都很有用。从打印代码到将其嵌入网站,用例是无限的。

回到

components/QrCode.js
文件,让我们更新代码库以使用
refs
访问文档对象模型 (DOM) 节点。

 // 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 = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div > {/* include this */}   {/* form input container */}    </ div >
 ); }; export default QrCode;

现在,让我们更新

downloadQRCode
中的功能
QrCode.js
文件,以便能够单击下载二维码按钮并将画布保存为图像文件。

 // src/components/QrCode.js
// imports
const QrCode = () => {  // state
  // useRef
  const downloadQRCode = ( e ) => {  e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" );  anchor.href = image;  anchor.download = `qr-code.png` ;    document .body.appendChild(anchor);  anchor.click();    document .body.removeChild(anchor);  setUrl( "" ); }; ...  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
   {/* form input container */}    </ div >
 ); }; export default QrCode;

在里面

downloadQRCode
函数,发生以下情况:

  • 它使用 .current 属性引用 ref 对象的当前值,以了解节点何时更改
  • qrcode.react
    组件在 DOM 中生成 canvas 元素,使您能够动态创建内容
  • 画布附加到
    toDataURL
    将指定类型参数设置为文件格式的方法,
     image/png
  • 接下来是锚,
     <a>
    元素被创建并且
    href
    设置为点击按钮时下载二维码的图片
  • 锚元素被附加到文档正文中,一旦下载了二维码,它就会被删除
  • 最后,状态 url 更新为
    setUrl
    提交表单时清除生成的二维码输入的变量

组件 QrCode.js 的完整代码:

 import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef();  const downloadQRCode = ( e ) => { e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" ); anchor.href = image; anchor.download = `qr-code.png` ;    document .body.appendChild(anchor); anchor.click();    document .body.removeChild(anchor); setUrl( "" ); };  const qrCodeEncoder = ( e ) => { setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "} />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
 />
          < button type = "submit" disabled = {!url} >
 Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

应用程序的最终结果应如下所示:

image

结论

本教程描述了创建 QR 码生成器的过程以及如何下载它以供以后使用。

资源

相關故事

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa