前端二维码技术全景：从原生JS到Vue/React/Uniapp/小程序的二维码生成

原创已于 2025-12-15 09:51:55 修改 · 834 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2025-12-15 09:47:37 首次发布

前端同时被 3 个专栏收录

74 篇文章

订阅专栏

vue

13 篇文章

订阅专栏

react

13 篇文章

订阅专栏

前端二维码技术全景：从原生JS到Vue/React/Uniapp/reactNative/小程序的生成实践

一、简介
二、原生js二维码生成
三、vue二维码生成
四、react二维码生成
五、微信小程序二维码生成
六、uQRCode二维码生成（全端兼容、Uniapp 专用）
七、uQRCode 基本配置
八、uQRCode 实例方法
九、uQRCode 静态属性

夸克资源分享：
表情包：https://pan.quark.cn/s/5b9ddeb237fe
工具箱：https://pan.quark.cn/s/aa2d6a730482，图吧、美蛋、路遥、入梦等
Fiddler Everywhere抓包：https://pan.quark.cn/s/6b1e2fbae019，
Adobe：https://pan.quark.cn/s/13e39cfeaadb，先看安装教程
JetBranis开发者工具：https://pan.quark.cn/s/16e94dcff1f7，先看安装教程下的jetbra教程
逆向工具：https://pan.quark.cn/s/50e93c8ca54c
前端项目搭建集锦：https://blog.youkuaiyun.com/randy521520/article/details/146998467

一、简介

二维码（Quick Response Code）作为一种矩阵式二维条码，是信息时代高效信息传递的核心载体。它通过黑白像素在平面上的特定排列，存储文本、网址、联系人、支付信息等多种数据，凭借高密度编码、快速识别的特性，已深度融入生产生活的各个场景。
从技术原理来看，二维码采用 Reed-Solomon 纠错算法，具备极强的容错能力 —— 即使表面污损、残缺达 30%，仍可准确识别，这一优势使其在复杂环境中广泛适用。相较于传统一维条码，它的信息存储量提升数十倍，单码可容纳数千个字符，且支持中文、图片等多元数据格式，打破了单一信息传递的局限。
在应用场景上，二维码实现了 “万物互联” 的落地。商业领域，它是营销利器：扫码领券、会员注册、产品溯源等功能，让品牌与消费者实现即时互动；支付场景中，微信、支付宝等平台的二维码支付，重构了交易模式，推动无现金社会加速到来；政务服务里，电子身份证、健康码、核酸检测报告等二维码应用，简化了办事流程，提升了公共服务效率；此外，在物流仓储、图书管理、工业生产等领域，二维码也承担着数据采集、追踪管理的关键角色，成为数字化转型的重要支撑。
如今，随着 5G、物联网技术的发展，二维码正朝着彩色化、动态化、防伪化方向升级。它不仅是信息传递的工具，更成为连接物理世界与数字生态的重要入口，持续为各行各业的智能化、高效化发展赋能，重塑着人们的生活与工作方式。

技术栈	首选库	核心优势	支持特性	参考文档
原生 JS	QRCodeStyling	零依赖、自定义强、LOGO + 彩色原生支持，支持：vue、react、next、node、angular	彩色、LOGO、渐变、导出	官网：https://qr-code-styling.com/ git：https://gitcode.com/gh_mirrors/qr/qr-code-styling
Vue	vue-qr/vue3-qr	Vue 语法适配、开箱即用	简洁版，支持 LOGO	官网：https://fengyuanchen.github.io/vue-qrcode/ git：https://gitcode.com/gh_mirrors/vu/vue-qrcode
Uniapp	uQRCode	全端兼容、Uniapp 专用，支持：原生js、vue、react、next、node、angular、微信小程序	彩色、LOGO、多端适配	官网：https://uqrcode.cn/doc git：https://github.com/Sansnn/uQRCode
React	react-qr-code	自定义性强、React 适配	简洁版，支持 LOGO	git：https://gitcode.com/gh_mirrors/re/react-qr-code/
微信小程序	weapp-qrcode-canvas-2d	小程序原生 API、体积小	简洁版，支持 LOGO	git：https://gitcode.com/gh_mirrors/we/weapp-qrcode-canvas-2d

二、原生js二维码生成

1.标准二维码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="canvas" style="text-align: center;"></div>
<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        data: "https://www.baidu.com/",
    });

    qrCode.append(document.getElementById("canvas"));
</script>
</body>
</html>

在这里插入图片描述

2.logo二维码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="canvas" style="text-align: center;"></div>
<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        data: "https://www.baidu.com/",
        image: "./头像.jpg"
    });

    qrCode.append(document.getElementById("canvas"));
</script>
</body>
</html>

在这里插入图片描述

3.彩色二维码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="canvas" style="text-align: center;"></div>
<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        type: "png",
        data: "https://www.baidu.com/",
        image: "./头像.jpg",
        dotsOptions: {
            color: "#4267b2",
        }
    });

    qrCode.append(document.getElementById("canvas"));
</script>
</body>
</html>

在这里插入图片描述

4.二维码下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="canvas" style="text-align: center;"></div>
<button id="download">下载</button>
<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        type: "png",
        data: "https://www.baidu.com/",
        image: "./头像.jpg",
        dotsOptions: {
            color: "#4267b2",
        }
    });

    qrCode.append(document.getElementById("canvas"));

    document.getElementById("download").addEventListener("click", () => {
        qrCode.download({ name: "qr", extension: "png" });
    });
</script>
</body>
</html>

三、vue二维码生成

1.运行yarn add vue@3 qrcode@1 @chenfengyuan/vue-qrcode@2
在这里插入图片描述

2.标准二维码

<template>
    <div>
        <VueQrcode :value="https://www.baidu.com/"></VueQrcode>
    </div>
</template>
<script setup>
import VueQrcode from '@chenfengyuan/vue-qrcode';
</script>
<style lang="scss" scoped>
    div {
        text-align: center;
        margin-top: 50px;
    }
</style>

在这里插入图片描述

3.logo二维码

<template>
    <div>
        <VueQrcode value="https://www.baidu.com/"></VueQrcode>
        <img :src="logo">
    </div>
</template>
<script setup>
import VueQrcode from '@chenfengyuan/vue-qrcode';
import logo from '@img/头像.jpg';

</script>
<style lang="scss" scoped>
    div {
        text-align: center;
        margin-top: 50px;
        position: relative;
        img{
            position: absolute;
            width: 5px;
            height: 5px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
</style>

在这里插入图片描述

4.配置项

四、react二维码生成

1.运行yarn add react-qr-code安装react-qr-code
在这里插入图片描述

2.标准二维码

import QRCode from 'react-qr-code';

const Test = ()=>{
    return <div style={{ textAlign:'center' }}>
        <QRCode value="https://www.baidu.com" />
    </div>;
};

export default Test;

在这里插入图片描述
3.logo二维码

import QRCode from 'react-qr-code';
import logo from '@img/头像.jpg';

const Test = ()=>{
    return <div style={{
        textAlign:'center',
        marginTop:'50px',
        position: 'relative'
    }}>
        <QRCode value="https://www.baidu.com" />
        <img src={logo} alt="logo" style={{
            width:'50px',
            height:'50px',
            position:'absolute',
            left: '50%',
            top:'50%',
            transform: 'translate(-50%,-50%)'
        }}></img>
    </div>;
};

export default Test;

在这里插入图片描述

4.配置项

五、微信小程序二维码生成

1.运行npm install weapp-qrcode-canvas-2d安装weapp-qrcode-canvas-2d，安装成功后点击工具构建npm，小程序支持npm需要一些配置可参考文档：https://blog.youkuaiyun.com/randy521520/article/details/154659752
在这里插入图片描述

2.标准二维码

<!--pages/tab1/tab1.wxml-->
<view>
  <canvas type="2d" style="width:200px; height:200px;" id="myQrcode" canvas-id='myQrcode' ></canvas>
</view>
// pages/tab1/tab1.js
import drawQrcode from 'weapp-qrcode-canvas-2d'

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const query = wx.createSelectorQuery()
    query.select('#myQrcode')
        .fields({
            node: true,
            size: true
        })
        .exec(async (res) => {
            const canvas = res[0].node
            await drawQrcode({
                canvas: canvas,
                canvasId: 'myQrcode',
                text: 'https://www.baidu.com',
            })
     
            wx.canvasToTempFilePath({
                canvasId: 'myQrcode',
                canvas: canvas,
                success(res) {
                    console.log('二维码临时路径：', res.tempFilePath)
                },
                fail(res) {
                    console.error(res)
                }
            })
        })
  }
})

在这里插入图片描述

3.logo二维码

// pages/tab1/tab1.js
import drawQrcode from 'weapp-qrcode-canvas-2d'

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const query = wx.createSelectorQuery()
    query.select('#myQrcode')
        .fields({
            node: true,
            size: true
        })
        .exec(async (res) => {
            const canvas = res[0].node
            const img = canvas.createImage();
            img.src = "/assets/img/头像.jpg"
            img.onload = async ()=>{
              await drawQrcode({
                  canvas: canvas,
                  canvasId: 'myQrcode',
                  text: 'https://www.baidu.com',
                  image: {
                    imageResource: img,
                    width: 80, // 建议不要设置过大，以免影响扫码
                    height: 80, // 建议不要设置过大，以免影响扫码
                    round: true // Logo图片是否为圆形
                }
              })
      
              wx.canvasToTempFilePath({
                  canvasId: 'myQrcode',
                  canvas: canvas,
                  success(res) {
                      console.log('二维码临时路径：', res.tempFilePath)
                  },
                  fail(res) {
                      console.error(res)
                  }
              })
            }
        })
  }
})

在这里插入图片描述

4.drawQrcode参数

参数	必须	说明	示例
canvas	必须	画布标识, 传入 canvas 组件实例
canvasId	非	绘制的canvasId	‘myQrcode’
text	必须	二维码内容	‘abc123’
width	非	二维码宽度 , 与canvas的width保持一致	260
padding	非	空白内边距	20
paddingColor	非	内边距颜色	默认与background一致
background	非	二维码背景颜色, 默认值白色	‘#ffffff’
foreground	非	二维码前景色, 默认值黑色	‘#000000’
typeNumber	非	二维码的计算模式, 默认值:-1	8
correctLevel	非	二维码纠错级别, 默认值为高级, 取值: { L: 1, M: 0, Q: 3, H: 2 }	1
image	非	在 canvas 上绘制图片, 层级高于二维码, v1.1.1+版本支持。具体使用见: 例子2	{imageResource: “”, width:80, height: 80, round: true}

六、uQRCode二维码生成（全端兼容、Uniapp 专用）

1.运行yarn add uqrcodejs安装uqrcode
在这里插入图片描述
2.标准二维码

<template>
    <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import UQRCode from 'uqrcodejs';

onShow(() => {
    let qr = new UQRCode();
    qr.data = 'https://www.baidu.com';
    qr.size = 200;
    qr.make();
    qr.canvasContext = uni.createCanvasContext('qrcode',this);
    qr.drawCanvas();
});
</script>

在这里插入图片描述
3.logo二维码

<template>
    <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import UQRCode from 'uqrcodejs';
import logo from './头像.jpg';

onShow(() => {
    let qr = new UQRCode();
    qr.setOptions({
        data: 'https://www.baidu.com', // 二维码跳转地址

        // Logo核心配置
        foregroundImageSrc: logo, // Logo图片地址
        foregroundImageWidth: 60, // Logo宽度（建议为二维码尺寸的1/5）
        foregroundImageHeight: 60, // Logo高度
        foregroundImagePadding: 8, // Logo内边距
        foregroundImageBackgroundColor: '#FFFFFF', // Logo背景色（白色边框）
        foregroundImageBorderRadius: 8, // Logo圆角（优化美观度）
        foregroundImageShadowBlur: 5, // Logo阴影模糊度
        foregroundImageShadowColor: 'rgba(0,0,0,0.1)' // Logo阴影颜色
    });

    qr.make();
    qr.canvasContext = uni.createCanvasContext('qrcode',this);
    qr.drawCanvas();
});
</script>

在这里插入图片描述
4.彩色二维码

<template>
    <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import UQRCode from 'uqrcodejs';

onShow(() => {
    let qr = new UQRCode();
    qr.setOptions({
        data: 'https://www.baidu.com', // 二维码跳转地址

        size: 280,
        margin: 12,
        useDynamicSize: true, // 启用动态尺寸（消除白色细线）

        // 基础颜色配置
        areaColor: '#F5F8FF', // 二维码绘制区域背景色（浅蓝）
        foregroundColor: '#E63946', // 前景码点颜色（红色）
        backgroundColor: 'rgba(255,255,255,0.8)', // 整体背景色（半透明白）

        // 定位角颜色（自定义差异化颜色）
        positionProbeForegroundColor: '#457B9D', // 定位角前景色（中蓝）

        // 时序图案颜色
        timingForegroundColor: '#A8DADC', // 时序线颜色（浅蓝）

        // 暗块颜色（与前景色区分）
        darkBlockColor: '#E63946'
    });

    qr.make();
    qr.canvasContext = uni.createCanvasContext('qrcode',this);
    qr.drawCanvas();
});
</script>

在这里插入图片描述

5.背景图二维码

<template>
    <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import UQRCode from 'uqrcodejs';
import logo from './头像.jpg';

onShow(() => {
    let qr = new UQRCode();
    qr.setOptions({
        data: 'https://example.com/activity', // 活动地址
        margin: 0, // 无边距（让背景图全屏）
        foregroundColor: '#333333', // 前景色（深色，保证可读性）
        foregroundPadding: 0.1, // 码点内边距（减少遮挡背景）
        useDynamicSize: true, // 启用动态尺寸（消除白色细线）

        // 背景图配置
        backgroundImageSrc: logo, // 背景图地址
        backgroundImageAlpha: 0.3, // 背景图透明度（0.3不影响扫码）
        backgroundImageBorderRadius: 16 // 背景图圆角（优化外观）
    });

    qr.make();
    qr.canvasContext = uni.createCanvasContext('qrcode',this);
    qr.drawCanvas();
});
</script>

在这里插入图片描述

6.自定义插件，点击切换颜色，官方也提供了许多免费插件：https://uqrcode.cn/doc/plugin/style.html

<template>
    <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"
            @click="handleClick"></canvas>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import UQRCode from 'uqrcodejs';

function drawRoundRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    // 左上角
    ctx.arcTo(x + width, y, x + width, y + height, radius);
    // 右上角
    ctx.arcTo(x + width, y + height, x, y + height, radius);
    // 右下角
    ctx.arcTo(x, y + height, x, y, radius);
    // 左下角
    ctx.arcTo(x, y, x + width, y, radius);
    ctx.closePath();
}


function ColorSwitchPlugin(UQRCode, options) {
    options.isRed = false;
    options.drawColorSwitchCanvas = function() {
        const { isMaked, canvasContext: ctx, dynamicSize: size, isRed } = this;
        if (!isMaked) {
            return Promise.reject(new UQRCode.Error('请先调用make方法'));
        }

        const drawModules = this.getDrawModules();
        return new Promise((resolve) => {
            drawModules.forEach((module) => {
                if (module.type === 'tile' && module.name === 'foreground') {
                    const { x, y, width, height } = module;
                    // 替换为自定义的drawRoundRect
                    drawRoundRect(ctx, x, y, width, height, 4);
                    ctx.fillStyle = isRed ? '#E63946' : '#2D5BFF';
                    ctx.fill();
                }
            });
            // 修复3：uni-app Canvas需要调用draw()完成绘制
            ctx.draw(false, () => {
                resolve(true);
            });
        });
    };
}
// 插件必需配置（供框架识别）
ColorSwitchPlugin.Type = 'style';
ColorSwitchPlugin.Name = 'colorSwitch';
ColorSwitchPlugin.DrawCanvas = 'drawColorSwitchCanvas';

// 2. 配置图片加载方法
UQRCode.prototype.loadImage = function(src) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = src;
        img.crossOrigin = 'anonymous';
        img.onload = () => resolve(img);
        img.onerror = (err) => reject(err);
    });
};

let qr = new UQRCode();
onShow(() => {
    qr.register(ColorSwitchPlugin); // 注册自定义插件
    qr.setOptions({
        data: 'https://example.com/activity', // 活动地址
        size: 250,
        margin: 10,
        useDynamicSize: true
    });

    qr.make();
    qr.canvasContext = uni.createCanvasContext('qrcode',this);
    qr.drawCanvas();
});
const handleClick = () => {
    qr.isRed = !qr.isRed; // 切换状态
    qr.drawColorSwitchCanvas(); // 重新绘制
};
</script>

在这里插入图片描述

7.vue使用uQRCode

<template>
    <div>
        <canvas id="canvas" height="200" width="200"></canvas>
    </div>
</template>
<script setup>
import UQRCode from 'uqrcodejs';
import { onMounted } from 'vue';

onMounted(() => {
    let canvas = document.getElementById('canvas');
    let qr = new UQRCode();
    qr.data = 'https://www.baidu.com';
    qr.useDynamicSize = true;
    qr.make();
    qr.canvasContext = canvas.getContext('2d');
    qr.drawCanvas();
});
</script>
<style lang="scss" scoped>
div {
    text-align: center;
    margin-top: 50px;
}
</style>

在这里插入图片描述

8.react使用uQRCode

import UQRCode from 'uqrcodejs';
import { useEffect } from 'react';

const Test = ()=>{

    useEffect(() => {
        let canvas = document.getElementById('qrcode');
        let qr = new UQRCode();
        qr.data = 'https://www.baidu.com';
        qr.useDynamicSize = true;
        qr.make();
        qr.canvasContext = canvas.getContext('2d');
        qr.drawCanvas();
    }, []);

    return (<div style={{ textAlign:'center' }}>
        <canvas id="qrcode" width="200" height="200" />
    </div>);
};

export default Test;

在这里插入图片描述
9.微信小程序使用uQRCode

// pages/test/test.js
import UQRCode from 'uqrcodejs';

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const query = wx.createSelectorQuery()
    query.select('#myQrcode')
        .fields({
            node: true,
            size: true
        })
        .exec(async (res) => {
            const canvas = res[0].node
            canvas.width = 200;
            canvas.height = 200;
            
            let qr = new UQRCode();
            qr.data = 'https://www.baidu.com';
            qr.useDynamicSize = true;
            qr.make();
            qr.canvasContext = canvas.getContext('2d');
            qr.drawCanvas();
        })
  }
})

在这里插入图片描述

七、uQRCode 基本配置

配置项	类型	默认值	必填	只读	说明
data	string	“”（空字符串）	是	否	指定二维码对应的内容（如链接、文本等），为核心必填项
size	number	200	否	否	指定要生成的二维码整体大小（单位：像素），需与画布尺寸匹配以避免留白/溢出
useDynamicSize	boolean	false	否	否	是否启用动态尺寸；启用后可消除码点小数点导致的留白状态，但需通过dynamicSize重设画布尺寸
dynamicSize	number	undefined	否	是	动态尺寸计算结果，仅当useDynamicSize=true时自动生成，用于同步画布尺寸
typeNumber	number	-1	否	否	二维码版本：-1为自动计算（内容越多版本越高），可手动指定1-40的版本号
errorCorrectLevel	number	UQRCode.errorCorrectLevel.H	否	否	纠错等级：可选L（1级）、M（0级）、Q（3级）、H（2级），H级容错率最高
margin	number	0	否	否	二维码整体边距（单位：像素），设置后二维码与画布边缘会产生空白间距
areaColor	string	#FFFFFF	否	否	二维码绘制区域的底色（即码点之外的背景色）
backgroundColor	string	rgba(255,255,255,0)（透明白色）	否	否	二维码整体背景色，支持rgba、十六进制等颜色格式
backgroundImageSrc	string	undefined	否	否	二维码背景图片的地址（如本地路径、网络链接），需配合loadImage方法加载
backgroundImageWidth	number	等于size的值	否	否	背景图片的宽度，默认与二维码尺寸一致
backgroundImageHeight	number	等于size的值	否	否	背景图片的高度，默认与二维码尺寸一致
backgroundImageX	number	0	否	否	背景图片在画布中的X轴坐标（控制水平位置），默认靠左对齐
backgroundImageY	number	0	否	否	背景图片在画布中的Y轴坐标（控制垂直位置），默认靠上对齐
backgroundImageAlpha	number	1	否	否	背景图片的透明度，取值范围0-1（0为完全透明，1为不透明）
backgroundImageBorderRadius	number	0	否	否	背景图片的圆角值（单位：像素），值越大圆角越明显
backgroundPadding	number	0.0	否	否	背景图片的内边距，取值范围0.0-1.0（按二维码尺寸比例计算）
foregroundColor	string	#000000	否	否	二维码码点的颜色（即前景色），决定二维码的主体颜色
foregroundImageSrc	string	undefined	否	否	二维码中心前景图片的地址（如Logo），需配合loadImage方法加载
foregroundImageWidth	number	等于size/4（二维码尺寸的1/4）	否	否	前景图片的宽度，默认居中显示
foregroundImageHeight	number	等于size/4（二维码尺寸的1/4）	否	否	前景图片的高度，默认居中显示
foregroundImageX	number	size/2 - foregroundImageWidth/2	否	否	前景图片的X轴坐标，默认计算为水平居中
foregroundImageY	number	size/2 - foregroundImageHeight/2	否	否	前景图片的Y轴坐标，默认计算为垂直居中
foregroundImagePadding	number	0	否	否	前景图片的边距（单位：像素），用于与码点产生间距
foregroundImageBackgroundColor	string	#FFFFFF	否	否	前景图片的背景色，用于覆盖码点区域，使图片更清晰
foregroundImageBorderRadius	number	0	否	否	前景图片的圆角值（单位：像素）
foregroundImageShadowOffsetX	number	0	否	否	前景图片阴影的水平偏移值（单位：像素）
foregroundImageShadowOffsetY	number	0	否	否	前景图片阴影的垂直偏移值（单位：像素）
foregroundImageShadowBlur	number	0	否	否	前景图片阴影的模糊度（单位：像素），值越大阴影越柔和
foregroundImageShadowColor	string	#808080	否	否	前景图片阴影的颜色
foregroundPadding	number	0.0	否	否	前景码点的内边距，取值范围0.0-1.0（按二维码尺寸比例计算）
positionProbeBackgroundColor	string	与backgroundColor一致	否	否	二维码定位角（三个角的方块）的背景色，默认继承整体背景色
positionProbeForegroundColor	string	与foregroundColor一致	否	否	二维码定位角的前景色，默认继承码点颜色
separatorColor	string	与foregroundColor一致	否	否	二维码定位角与其他区域的分割线颜色，默认继承码点颜色
positionAdjustBackgroundColor	string	与backgroundColor一致	否	否	二维码对齐图案（中间小方块）的背景色，默认继承整体背景色
positionAdjustForegroundColor	string	与foregroundColor一致	否	否	二维码对齐图案的前景色，默认继承码点颜色
timingBackgroundColor	string	与backgroundColor一致	否	否	二维码时序图案（黑白交替线）的背景色，默认继承整体背景色
timingForegroundColor	string	与foregroundColor一致	否	否	二维码时序图案的前景色，默认继承码点颜色
typeNumberBackgroundColor	string	与backgroundColor一致	否	否	二维码版本图案的背景色，默认继承整体背景色
typeNumberForegroundColor	string	与foregroundColor一致	否	否	二维码版本图案的前景色，默认继承码点颜色
darkBlockColor	string	与foregroundColor一致	否	否	二维码暗块（黑色码点）的颜色，默认继承码点颜色
base	object	undefined	否	是	二维码基础对象，调用make()方法后自动生成，包含底层QRCode实例数据
modules	array	[]（空数组）	否	是	二维码核心模块数据（码点矩阵），调用make()后自动填充
moduleCount	number	0	否	是	二维码模块（码点）的数量，调用make()后根据版本自动计算
canvasContext	object	undefined	否	否	Canvas画布上下文，调用drawCanvas()方法前必须指定
drawReserve	boolean	false	否	否	画布绘制是否保留历史内容：仅对旧版Canvas有效，2D Canvas不支持此属性
isMade	boolean	false	否	是	标记是否已调用make()方法：true表示已生成二维码数据，false表示未生成

八、uQRCode 实例方法

方法名	返回值	参数说明	核心功能	关键注意事项
loadImage	Promise	src（string）：图片路径（本地路径/网络链接）	为二维码的背景图、前景图设置图片加载逻辑，确保图片资源能被正确获取并绘制	1. 各平台实现方式不同（HTML/Uni-app/微信小程序需适配不同API）； 2. 微信小程序需配置网络图片download域名白名单； 3. 必须返回Promise对象，resolve传递图片资源，reject传递错误信息
setOptions	void	option（object）：包含基本配置的对象（如data/size/margin等）	批量设置二维码的基本配置，替代逐个赋值属性的方式，简化代码	配置对象需包含合法的基本配置项（参考“基本配置文档”），设置后需调用make()生效
make	void	无	生成二维码核心数据（如modules码点矩阵、moduleCount模块数量）	1. 必须在设置data（二维码内容）后调用； 2. 调用后isMade属性会变为true，标记数据已生成
getDrawModules	Array	无	获取二维码各绘制模块的详细信息，包含层级、位置、尺寸、颜色等数据	1. 必须在make()调用后使用（否则无数据）； 2. 模块层级顺序：绘制区域→背景图→背景/前景→前景图； 3. 返回数组中每个元素包含name（模块名）、type（模块类型）、x/y（坐标）等字段
drawCanvas	Promise	无	将生成的二维码数据绘制到指定的Canvas画布上	1. 绘制前必须设置canvasContext（Canvas上下文）； 2. 支持通过then()捕获绘制成功，catch()捕获失败； 3. 2D Canvas不支持drawReserve（保留历史绘制）特性
register	void	plugin（Function）：扩展插件的回调函数	为当前UQRCode实例注册扩展插件，实现自定义功能（如自定义码点样式、2.5D效果）	1. 插件需符合指定格式（需包含扩展属性、自定义绘制方法等）； 2. 注册后需设置插件相关属性，并调用插件对应的绘制方法（如draw25DCanvas）； 3. 全局注册可使用UQRCode.use()方法

九、uQRCode 静态属性

静态属性名	类型	说明
errorCorrectLevel	object	定义二维码的纠错等级常量，包含： - L: 1级纠错（容错率约7%） - M: 0级纠错（容错率约15%） - Q: 3级纠错（容错率约25%） - H: 2级纠错（容错率约30%）
moduleType	object	定义二维码模块类型的常量，包含： - BACKGROUND: 背景模块 - FOREGROUND: 前景模块 - POSITION_PROBE: 定位角模块 - POSITION_ADJUST: 对齐图案模块 - TIMING: 时序图模块 - TYPE_NUMBER: 版本图案模块 - DARK_BLOCK: 暗块模块
drawLevel	object	定义二维码绘制层级的常量（决定模块绘制顺序），包含： - BACKGROUND: 背景层（最先绘制） - FOREGROUND: 前景层 - POSITION_PROBE: 定位角层 - POSITION_ADJUST: 对齐图案层 - TIMING: 时序图案层 - TYPE_NUMBER: 版本图案层 - DARK_BLOCK: 暗块层 - FOREGROUND_IMAGE: 前景图片层（最后绘制）
pluginName	object	定义内置插件名称的常量，包含： - QRCODE_25D: 2.5D二维码插件（提供立体效果） - QRCODE_LOGO: Logo插件（增强前景图功能）
version	string	当前 uQRCode 库的版本号（如4.0.6），用于识别库版本信息
use	Function	全局注册插件的方法，参数为插件回调函数，作用于所有 UQRCode 实例（区别于register实例注册）