QRCode.js 终极指南 2024

2026-02-06 05:07:22作者：郦嵘贵Just

快速上手指南

想要在项目中秒级集成JavaScript二维码生成功能？QRCode.js让你三步搞定！✨

第一步：获取库文件

git clone https://gitcode.com/gh_mirrors/qr/qrcodejs

第二步：引入到HTML

<script src="path/to/qrcode.min.js"></script>

第三步：生成二维码

// 最简单用法
new QRCode(document.getElementById("qrcode"), "https://example.com");

// 带配置选项
var qrcode = new QRCode("qrcode", {
    text: "你的内容",
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff"
});

实战应用场景

微信二维码生成 📱

// 生成微信名片二维码
function generateWechatQR(name, wechatId) {
    const text = `微信添加：${name}\nID：${wechatId}`;
    new QRCode(document.getElementById("wechat-qr"), {
        text: text,
        width: 200,
        height: 200
    });
}

支付链接转换

// 支付宝/微信支付链接转二维码
function generatePaymentQR(paymentUrl) {
    const qrcode = new QRCode("payment-container", {
        text: paymentUrl,
        width: 180,
        height: 180,
        correctLevel: QRCode.CorrectLevel.H
    });
    
    // 添加刷新功能
    document.getElementById("refresh-btn").onclick = function() {
        qrcode.makeCode(newPaymentUrl);
    };
}

核心优势亮点

🌟 零依赖设计：无需jQuery或其他库，纯原生JavaScript实现 🚀 跨浏览器兼容：完美支持IE6+、Chrome、Firefox、Safari等主流浏览器 💪 Canvas生成技术：利用HTML5 Canvas实现高清二维码渲染 📱 移动端友好：自动适配各种移动设备屏幕尺寸

移动端适配技巧

// 响应式二维码生成
function generateResponsiveQR(text, containerId) {
    const container = document.getElementById(containerId);
    const size = Math.min(container.offsetWidth, 300); // 最大300px
    
    new QRCode(container, {
        text: text,
        width: size,
        height: size
    });
}

// 监听窗口变化
window.addEventListener('resize', function() {
    generateResponsiveQR("你的内容", "qrcode-container");
});

疑难解答

常见问题排查

二维码显示不全？

检查容器尺寸是否足够
确保width/height参数为数值类型

移动端扫描失败？

使用correctLevel: QRCode.CorrectLevel.H 提高容错率
避免二维码尺寸过小（建议≥200px）

IE浏览器兼容问题？

库已内置IE6+兼容处理
如遇问题，尝试使用SVG版本

错误处理指南

try {
    var qrcode = new QRCode("container", {
        text: "https://example.com",
        width: 150,
        height: 150
    });
} catch (error) {
    console.error("二维码生成失败:", error.message);
    // 备用方案：显示错误信息或默认图片
    document.getElementById("container").innerHTML = 
        '<p style="color:red">二维码生成失败，请刷新重试</p>';
}

性能优化技巧

批量生成优化

// 使用对象池避免重复创建
const qrCodePool = {};

function getQRCode(containerId, text) {
    if (!qrCodePool[containerId]) {
        qrCodePool[containerId] = new QRCode(containerId, {
            width: 100,
            height: 100
        });
    }
    qrCodePool[containerId].makeCode(text);
    return qrCodePool[containerId];
}

内存管理

// 清理不再使用的二维码
function clearQRCode(containerId) {
    if (qrCodePool[containerId]) {
        qrCodePool[containerId].clear();
        delete qrCodePool[containerId];
    }
}

高级用法示例

动态更新内容

// 实时更新二维码内容
const qrcode = new QRCode("dynamic-qr", {
    text: "初始内容",
    width: 150,
    height: 150
});

// 每5秒更新一次
setInterval(() => {
    const newText = "更新内容-" + Date.now();
    qrcode.makeCode(newText);
}, 5000);

自定义样式二维码

// 创建彩色二维码
new QRCode("styled-qr", {
    text: "彩色二维码示例",
    width: 200,
    height: 200,
    colorDark: "#FF6B6B",    // 红色暗点
    colorLight: "#F7F7F7"    // 浅灰色背景
});