qrcode.js 初始化需确保目标元素存在且可见，width/height为纯数字像素值，中文需encodeuricomponent编码，导出png须用canvas且禁用svg，更新内容需先clear再makecode。
QRCode.js 初始化时 target 元素必须存在且可写入
直接在 document.body 未加载完成时调用 new QRCode()，会报错 Cannot read property 'appendChild' of null。常见于把初始化代码放在 里，或未监听 DOMContentLoaded。
实操建议：
- 确保目标容器（如
<div id="qrcode"></div>）已在 HTML 中声明，且 ID 唯一 - 初始化代码放在
前，或包裹在document.addEventListener('DOMContentLoaded', ...)中 - 避免用
display: none隐藏容器——QRCode.js依赖容器尺寸计算 canvas 大小，隐藏后宽高为 0，生成的二维码可能空白或极小
设置 width/height 不生效？注意单位和参数位置
QRCode.js 的 width 和 height 是纯数字（像素值），不接受 "200px" 或 "10rem"。传错类型会导致降级为默认 256×256，且无任何警告。
实操建议：
- 正确写法：
new QRCode(element, { text: "https://example.com", width: 200, height: 200 }) - 若需响应式，先用 JS 获取容器实际像素宽高，再传入；不要指望 CSS 设置容器尺寸后 QRCode 自动适配
-
width/height仅控制最终 SVG 或 Canvas 渲染区域大小，不影响纠错等级（correctLevel）或内容长度限制
中文内容乱码或生成失败：text 必须 UTF-8 编码且长度受限
QRCode.js 对中文支持有限：当 text 含中文且未做处理时，可能生成空白、报错 typeError: Cannot read property 'length' of undefined，或扫码显示乱码。
实操建议：
- 服务端已返回的中文字符串，前端可先用
encodeURIComponent()编码（如encodeURIComponent("你好") → "%E4%BD%A0%E5%A5%BD"），再传给 QRCode.js - 扫码端需对应解码（多数扫码 App 能自动识别 URL 编码，但原生解析需手动
decodeURIComponent()） - 避免超长中文——QR Code 版本 1（最小）仅支持约 25 个 UTF-8 字符；超过建议用短链服务或后端生成 base64 图片
导出为图片（PNG）需要额外处理 canvas，不能直接取 innerHTML
QRCode.js 默认渲染为 <table> 或 <code><canvas></canvas>，但 toDataURL() 仅对 <canvas></canvas> 有效。若配置了 useSVG: true，则无法直接导出 PNG。
实操建议：
- 初始化时显式关闭 SVG：
useSVG: false（默认值，但建议写明） - 获取 canvas 元素：
const canvas = document.getElementById("qrcode").querySelector("canvas") - 导出：
canvas.toDataURL("image/png")，或用canvas.toBlob(callback, "image/png")避免大图触发浏览器内存警告 - 注意跨域：若
text是 data URL 或含跨域资源，toDataURL()可能被浏览器拦截（SecurityError）
qrCode.clear() 再 makeCode(newText)，否则旧 DOM 节点残留，新码可能叠在旧码上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
