QRCodes
首页
指南
演示
API
基准测试
首页
指南
演示
API
基准测试

QRCode 在线演示

QRCode 样式演示

选择不同的样式和前端库，实时预览效果

基础样式
@veaba/qrcode-js
256 x 256 px

所有样式

加载中...
基础
加载中...
圆角
加载中...
渐变
加载中...
Logo区域
加载中...
微信绿
加载中...
抖音
加载中...
支付宝
加载中...
小红书
加载中...
赛博朋克
加载中...
复古
加载中...
极简

样式说明

本演示展示了 @veaba/qrcode-shared 包提供的各种预设样式：

样式 说明 使用场景
基础 标准黑白二维码 通用场景，打印友好
圆角 带圆角的模块 现代 UI 设计
渐变 渐变色填充 品牌展示，营销活动
Logo区域 中心留空，可放置 Logo 企业品牌推广
微信绿 微信风格绿色 微信生态相关应用
抖音 抖音风格渐变 短视频平台相关
支付宝 支付宝风格，带 Logo 区 支付相关应用
小红书 小红书风格红色 社交电商相关
赛博朋克 霓虹色风格 科技感，游戏相关
复古 棕色复古风格 文艺，怀旧主题
极简 灰色调简约风格 极简设计风格

安装

@veaba/qrcode-shared 是内部私有包，不对外发布。请安装对应的前端包：

# 浏览器环境（推荐）
npm install @veaba/qrcode-js

# Node.js 环境
npm install @veaba/qrcode-node

# Bun 环境
npm install @veaba/qrcode-bun

快速开始

基础用法

import { QRCodeCore, QRErrorCorrectLevel } from '@veaba/qrcode-js';

// 创建二维码
const qr = new QRCodeCore('https://github.com/veaba/qrcodes', QRErrorCorrectLevel.H);
const svg = qr.toSVG(256);

// 在浏览器中显示
document.getElementById('qrcode').innerHTML = svg;

使用预设样式

import { generateRoundedQRCode, generateGradientQRCode, generateWechatStyleQRCode } from '@veaba/qrcode-js';

// 圆角样式
const roundedSvg = generateRoundedQRCode('https://github.com/veaba/qrcodes', 256, 8);

// 渐变样式
const gradientSvg = generateGradientQRCode('https://github.com/veaba/qrcodes', 256, '#667eea', '#764ba2');

// 微信样式
const wechatSvg = generateWechatStyleQRCode('https://github.com/veaba/qrcodes', 256);

自定义样式

import { QRCodeCore, QRErrorCorrectLevel } from '@veaba/qrcode-js';

const qr = new QRCodeCore('https://github.com/veaba/qrcodes', QRErrorCorrectLevel.H);

// 自定义样式
const styledSvg = qr.toStyledSVG({
  size: 256,
  colorDark: '#FF2442', // 深色模块颜色
  colorLight: '#ffffff', // 浅色背景颜色
  borderRadius: 12, // 模块圆角
  quietZone: 2, // 边距（模块数）
  gradient: {
    // 渐变配置
    color1: '#FF00FF',
    color2: '#00FFFF',
  },
  logoRegions: [
    // Logo 区域
    { row: 8, col: 8, size: 5 },
  ],
});

在框架中使用

React

import { QRCodeCore, QRErrorCorrectLevel } from '@veaba/qrcode-js';
import { useMemo } from 'react';

function QRCode({ text, size = 256, style = 'rounded' }) {
  const svg = useMemo(() => {
    const qr = new QRCodeCore(text, QRErrorCorrectLevel.H);
    return style === 'rounded' ? qr.toStyledSVG({ size, borderRadius: 8, quietZone: 2 }) : qr.toSVG(size);
  }, [text, size, style]);

  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

Vue

<template>
  <div v-html="svg" />
</template>

<script setup lang="ts">
import { QRCodeCore, QRErrorCorrectLevel } from '@veaba/qrcode-js';
import { computed } from 'vue';

const props = defineProps<{
  text: string;
  size?: number;
}>();

const svg = computed(() => {
  const qr = new QRCodeCore(props.text, QRErrorCorrectLevel.H);
  return qr.toSVG(props.size || 256);
});
</script>

API 参考

QRCodeCore

核心二维码生成类。

构造函数

constructor(text: string, correctLevel?: QRErrorCorrectLevel)
  • text: 二维码内容
  • correctLevel: 纠错级别（默认 QRErrorCorrectLevel.H）

方法

方法 说明
toSVG(size?: number): string 生成基础 SVG
toStyledSVG(options: StyledSVGOptions): string 生成样式化 SVG
isDark(row: number, col: number): boolean 检查模块是否为深色
getModuleCount(): number 获取模块数量

预设函数

函数 说明
generateRoundedQRCode(text, size, radius) 圆角样式
generateGradientQRCode(text, size, color1, color2) 渐变样式
generateQRCodeWithLogoArea(text, size, logoRatio) Logo 区域样式
generateWechatStyleQRCode(text, size) 微信样式
generateDouyinStyleQRCode(text, size) 抖音样式
generateAlipayStyleQRCode(text, size) 支付宝样式
generateXiaohongshuStyleQRCode(text, size) 小红书样式
generateCyberpunkStyleQRCode(text, size) 赛博朋克样式
generateRetroStyleQRCode(text, size) 复古样式
generateMinimalStyleQRCode(text, size) 极简样式

相关文档

ON THIS PAGE