QRCodes

    QRCode 在线演示

    QRCode 样式演示

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

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

    所有样式

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

    样式说明

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

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

    安装

    @veaba/qrcode-js-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)极简样式

    相关文档