Vue 项目中二维码生成功能全解析

在信息快速传递的时代，二维码以其简洁高效的特点，成为数据交互的重要媒介。无论是用于支付、信息分享，还是活动参与，二维码都扮演着关键角色。在 Vue 项目开发中，如何实现二维码生成功能？本文将结合具体代码，带你深入了解 Vue 项目中二维码生成的技术细节与实现逻辑。

一、技术栈与依赖准备

上述代码基于 Vue 3 + Vant UI 框架开发，其中实现二维码生成的核心依赖是qrcode库。在开始编码前，需要通过包管理工具（如 npm 或 yarn）安装该库：

TypeScript 复制代码

npm install qrcode
# 或
yarn add qrcode

同时，代码中还引入了 Vant UI 库的部分组件和方法，如van-nav-bar用于创建导航栏、showToast用于显示提示信息，以及 Vue Router 相关的useRouter和useRoute用于路由操作。这些依赖共同为二维码生成功能的实现提供了基础环境。

二、模板部分：搭建二维码展示容器

TypeScript 复制代码

<template>

<van-nav-bar title="五龙山野生动物园王国" :style="{ background: 'transparent' }" left-arrow @click-left="returns" />

<div class="qr-code-container" @touchstart="startLongPress" @touchmove="resetLongPress" @touchend="endLongPress" @click="resetLongPress" @contextmenu.prevent >

<!-- 使用 Vant 的弹窗显示二维码 -->

<van-dialog v-model:show="showQRCode" title="二维码" :show-confirm-button="false">

<div class="qr-code-wrapper">

<canvas ref="qrCanvas" class="qr-code"></canvas>

</div>

</van-dialog>

</div>

</template>

在模板中，qr-code-container div 用于承载二维码相关内容，而van-dialog弹窗组件则负责展示生成的二维码。弹窗内部的<canvas>元素通过ref绑定qrCanvas，这个<canvas>元素就是后续生成二维码的绘制容器。它将作为qrcode库生成二维码的目标，通过在该画布上绘制，实现二维码的可视化展示。

三、脚本部分：核心二维码生成逻辑

TypeScript 复制代码

<script setup>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';
import { showToast } from 'vant';
// 省略其他无关导入

const qrCanvas = ref(null);
const showQRCode = ref(false);
// 省略其他变量声明

// 生成二维码的函数
const generateQRCode = (text) => {
  if (!qrCanvas.value) return;
  // 添加UTF-8 BOM标识
  QRCode.toCanvas(qrCanvas.value, text, {
    width: 200,
    margin: 1,
    errorCorrectionLevel: 'H', // 最高容错级别
    color: {
      dark: '#000000',  // 二维码颜色
      light: '#ffffff' // 背景色
    },
    mode: 'Byte', // 强制使用字节模式
    toSJISFunc: null
  }, (error) => {
    if (error) {
      showToast('生成二维码失败');
      console.error(error);
    } else {
      showQRCode.value = true;
    }
  });
};

// 页面加载完成后自动生成二维码
onMounted(() => {
  // 这里可以设置你想要生成的二维码内容
  generateQRCode('nihao你');
});
</script>

变量与引用准备：通过ref创建qrCanvas响应式引用，用于获取模板中的<canvas>元素；showQRCode用于控制二维码弹窗的显示与隐藏。这些变量为后续二维码生成与展示提供了数据驱动的基础。

generateQRCode 核心函数：该函数接收一个文本参数，用于确定二维码包含的信息。首先检查qrCanvas是否存在，若不存在则直接返回。然后调用QRCode.toCanvas方法，将指定文本生成二维码并绘制到qrCanvas对应的<canvas>元素上。

- 配置参数详解：

- - width：设置二维码的宽度为 200 像素。

- - margin：定义二维码周围的边距为 1 像素。

- - errorCorrectionLevel：设置为'H'，表示最高容错级别，即使二维码部分受损，也能保证信息正常识别。

- - color：配置二维码的颜色（dark）和背景色（light）。

- - mode：强制使用字节模式，确保文本内容的正确编码与生成。

- 回调处理：生成过程中若出现错误，通过showToast显示错误提示，并在控制台打印错误信息；生成成功则将showQRCode设置为true，触发二维码弹窗显示。

页面挂载自动生成：onMounted钩子函数在组件挂载完成后自动调用generateQRCode函数，传入初始的二维码文本内容，实现页面加载时自动生成二维码。

四、样式优化：让二维码展示更美观

TypeScript 复制代码

<style scoped>
.qr-code {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}
</style>

在样式部分，通过对qr-code类的设置，调整二维码在弹窗中的位置与外观。利用position: absolute进行绝对定位，结合top、left和transform属性，将二维码居中显示；max-width和height: auto确保二维码在不同屏幕尺寸下能自适应显示，同时border-radius: 15px为二维码添加圆角效果，提升视觉美观度。

通过以上步骤，我们在 Vue 项目中成功实现了二维码生成功能。从依赖安装、模板搭建，到核心生成逻辑编写与样式优化，每一个环节都紧密配合，共同打造出一个功能完备、展示美观的二维码生成模块。在实际应用中，我们可以根据需求灵活调整二维码内容与展示样式，让其更好地服务于项目业务场景。