企业官网建设流程全解析

如何用 QRCode.js 快速生成网页二维码：新手 10 分钟上手教程

【免费下载链接】qrcodejsCross-browser QRCode generator for javascript项目地址: https://gitcode.com/gh_mirrors/qr/qrcodejs

QRCode.js 是一个免费的 JavaScript 库，专门用来在网页里生成二维码：把一段文本或网址交给它，它就能在指定的div里画出一个手机可直接扫描的码，且整个库不依赖任何外部文件。本文按"跑通 → 调参 → 排错"的顺序带你走完一遍，跟完之后，你能在自己的页面里放上一个可以动态换内容的二维码。

跑起来之前：先拿到库文件

接入方式就是"把文件放进项目、再引用"，两种拿法任选：

• 完整克隆仓库，方便对照仓库里自带的示例页：执行git clone https://gitcode.com/gh_mirrors/qr/qrcodejs
• 只要最小体积：把qrcode.min.js复制到你的项目目录即可，其他文件都可以不要。压缩版体积小；未压缩的qrcode.js带完整注释，方便断点调试。

三步把第一个二维码跑到页面上

1. 声明容器并引入库文件

在 HTML 里加一个空div作为容器，再引入库文件。二维码会直接画进这个div，所以它本身不需要额外样式。

2. 几行代码生成第一个码

<script src="qrcode.min.js"></script> <div id="qrcode"></div> <script> var qr = new QRCode(document.getElementById("qrcode"), { text: "https://example.com", // 要编码的内容 width: 128, height: 128 }); </script>

new QRCode(el, options)接收两个参数：容器元素（也可以直接传 id 字符串）和配置对象。第二个参数只写一个字符串时，会被当作text处理，其余全用默认值。

3. 刷新页面验证

看到div里出现黑白方块，用手机扫码能读到里面的内容，就算跑通了 ✅

常用参数速查

所有配置项都是可选的，缺省值如下：

纠错等级决定冗余信息多少：H 容错最强但格子最密，L 反之。短网址用 M 就够，要印在纸质物料上再考虑 H。渲染方式上，现代浏览器走 Canvas，老浏览器自动降级为table标签绘制，跨浏览器这点不用你操心。

动态换内容：保留实例，两个方法搞定

拿到实例后，换内容只需要两个方法：

qr.clear(); // 清空当前二维码 qr.makeCode("https://new-url.com"); // 生成新码

makeCode会直接覆盖旧内容，clear则把容器清空。做"输入框实时出码"这类交互时，监听输入事件后调一次makeCode即可。

排错小抄：新手最容易踩的 3 个坑

⚠️

1. 码比预期大了一倍：默认尺寸是 256×256 而不是 128，想要小一点就在配置里写明width和height。
2. 控制台报code length overflow：内容太长或纠错等级太高，容量装不下了。缩短文本，或把correctLevel降到 M / L。
3. 换了内容没生效：多半是实例变量没保留住（重复new QRCode却没引用旧的），或元素 id 写错导致没拿到容器。先确认qr变量还在，再看控制台有无空元素报错。

下一步：去仓库里翻一翻

• 官方示例页 index.html：带输入框的实时出码 demo，对着它改最快
• SVG 版示例 index-svg.html：useSVG: true的完整写法
• README.md：官方英文说明，API 与浏览器兼容范围以它为准

到这里，你已经完成了"装库 → 出码 → 调参 → 排错"的完整闭环。接下来不妨照着index-svg.html把 SVG 渲染跑起来，或者给页面加一个实时出码的输入框，把这套 API 真正用起来。

【免费下载链接】qrcodejsCross-browser QRCode generator for javascript项目地址: https://gitcode.com/gh_mirrors/qr/qrcodejs