qrcode is not defined 错误本质是脚本未加载完成即执行初始化，须确保 qrcode.js 通过 script 标签在 dom 元素后加载并绑定 onload 回调，或使用 async + 动态 import；重复生成需手动清空容器，中文内容应 encodeuricomponent 编码，推荐 render: "svg" 避免高 dpi 模糊。
QRCode.js 初始化时提示 QRCode is not defined
这是最常见的问题，本质是脚本没加载完成就执行了初始化。QRCode.js 不提供 UMD 或全局自动挂载，必须显式引入并等待 script 加载完毕。
正确做法是：用 async + onload，或确保 script 标签在 DOM 元素之后、且无 defer 干扰：
<div id="qrcode"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcode.js@1.5.3/qrcode.min.js" onload="initQR()"></script><script>
function initQR() {
new QRCode(document.getElementById("qrcode"), {
text: "https://example.com",
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
</script>
注意：QRCode.CorrectLevel.H 是枚举值，不是字符串；colorDark 和 colorLight 不支持透明色（如 #00000000），会退为黑底白图。
动态更新二维码内容但 DOM 没刷新
QRCode.js 没有内置 update() 方法，重复调用 new QRCode(...) 会报错：Canvas is already in use —— 因为它内部复用了容器节点的子元素，不会自动清空。
解决方式只有手动清空容器再重建：
- 每次生成前先执行
document.getElementById("qrcode").innerHTML = "" - 或者更稳妥地移除 canvas 元素：
el.querySelector("canvas")?.remove() - 如果用的是
render: "svg"模式，对应清空svg元素
示例（带清空逻辑）：
function renderQR(url) {
const el = document.getElementById("qrcode");
el.innerHTML = ""; // 关键：必须清空
new QRCode(el, { text: url, width: 180, height: 180 });
}
中文或特殊字符显示乱码 / 扫描失败
QRCode.js 默认编码是 UTF-8，但若原始字符串含 emoji、全角标点或未标准化的中文，某些扫码器（尤其是旧版微信）可能识别失败。
安全做法是手动做 URI 编码（不是 URL 编码）：
- 对纯文本内容，用
encodeURIComponent(text)再传入text参数 - 但如果目标是跳转链接，应保持原始 URL 结构，只编码参数部分，例如：
https://site.com/?q=+encodeURIComponent("你好") - 避免直接传入未处理的
location.href，它可能含#锚点，需截断
错误示例：new QRCode(el, { text: "姓名：张三" }) → 改为 text: encodeURIComponent("姓名：张三")。
移动端 canvas 渲染模糊或尺寸异常
在高 DPI 屏幕（如 iPhone Retina）上，canvas 默认以 CSS 像素渲染，导致二维码边缘发虚、扫码困难。
解决方案是手动适配 devicePixelRatio：
- 不依赖
width/height参数，改用 canvas API 设置真实像素 - 或换用
render: "svg"（兼容性好、缩放无损），只需加配置项：render: "svg" - 如果坚持用 canvas，需额外写缩放逻辑，成本高，一般不推荐
推荐 SVG 方式（简单可靠）：
new QRCode(document.getElementById("qrcode"), {
text: "https://example.com",
render: "svg", // ← 关键开关
width: 200,
height: 200
});
SVG 模式下，width/height 控制的是 viewBox 尺寸，实际输出是矢量，任意缩放都清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
