最简单快捷的方法 (推荐初学者使用)
这种方法不需要任何编程知识,直接使用现成的在线工具生成代码片段。
（图片来源网络，侵删）
步骤：
-
访问在线二维码生成器：
- 推荐使用 QR Code Generator 或 The QR Code Generator,这些网站功能强大且免费。
-
：
在文本框中输入您想要生成二维码的内容，比如网址、文本、电话号码等。
（图片来源网络，侵删） -
自定义样式 (可选)：
您可以调整二维码的颜色、添加 Logo、改变样式等。
-
下载代码：
- 完成设置后，找到 "Download" 或 "Embed" 按钮。
- 选择 "Embed" (嵌入) 选项。
- 网站会提供多种嵌入方式，选择 HTML。
- 它会直接给您一段完整的 HTML 代码,您只需复制粘贴到您的网页文件中即可。
使用现成的 JavaScript 库 (最常用、最灵活)
这种方法是网页开发中最主流的方式，您只需要引入一个二维码生成库的 JavaScript 文件,然后用几行代码就能调用。
我们将使用一个非常流行的库：qrcode.js。
第1步：准备 HTML 文件
创建一个名为 index.html 的文件,并放入以下代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">在线生成二维码</title>
<!-- 引入 qrcode.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
#container {
text-align: center;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
color: #333;
}
#text-input {
width: 300px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
#generate-btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#generate-btn:hover {
background-color: #0056b3;
}
#qrcode {
margin-top: 20px;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div id="container">
<h1>二维码生成器</h1>
<input type="text" id="text-input" placeholder="请输入网址或文本内容">
<br>
<button id="generate-btn">生成二维码</button>
<div id="qrcode"></div>
</div>
<script>
// 获取页面元素
const textInput = document.getElementById('text-input');
const generateBtn = document.getElementById('generate-btn');
const qrcodeDiv = document.getElementById('qrcode');
// 为按钮添加点击事件监听器
generateBtn.addEventListener('click', () => {
// 获取输入框的文本
const text = textInput.value;
// 如果输入框为空，则不生成
if (!text) {
alert('请输入内容！');
return;
}
// 在生成新二维码之前，清空旧二维码
qrcodeDiv.innerHTML = '';
// 创建新的二维码实例
// new QRCode(container, options);
new QRCode(qrcodeDiv, {
text: text, // 要编码的文本
width: 200, // 二维码的宽度
height: 200, // 二维码的高度
colorDark: "#000000", // 前景色
colorLight: "#ffffff", // 背景色
correctLevel: QRCode.CorrectLevel.H // 纠错级别 (L, M, Q, H)
});
});
// 页面加载时，可以默认生成一个二维码
window.onload = () => {
textInput.value = "https://www.example.com"; // 设置默认内容
generateBtn.click(); // 模拟点击按钮
};
</script>
</body>
</html>
如何使用这段代码：
- 保存文件：将上面的代码完整复制，粘贴到一个新的文本文件中，并将其命名为
index.html。 - 打开文件：直接用浏览器（如 Chrome, Firefox, Edge）打开这个
index.html文件。 - 效果：您会看到一个简单的网页，可以在输入框里输入任何内容，点击“生成二维码”按钮,下方就会实时显示对应的二维码。
代码解释：
<script src="...">：我们从 CDN (内容分发网络) 引入了qrcode.js库,这样我们就不需要下载任何文件。<div id="qrcode"></div>：这是一个空的div容器，二维码将被动态地“画”到这个容器里面。new QRCode(qrcodeDiv, {...})：这是核心代码，当用户点击按钮时，我们创建了一个QRCode对象。- 第一个参数
qrcodeDiv指定了二维码要放置的容器。 - 第二个参数是一个配置对象，可以设置二维码的文本、大小、颜色等。
- 第一个参数
使用更现代的库 qrcode-generator (更小更快)
这个库比 qrcode.js 更小，性能也更好,适合对性能有要求的现代应用。
第1步：准备 HTML 文件
创建 index.html 文件,内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">现代二维码生成器</title>
<!-- 引入 qrcode-generator 库 -->
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
<style>
/* 样式可以复用方案二的 */
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; margin: 0; background-color: #f0f2f5; }
#container { text-align: center; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
h1 { color: #333; }
#text-input { width: 300px; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; }
#generate-btn { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
#generate-btn:hover { background-color: #218838; }
#qrcode { margin-top: 20px; }
#qrcode img { max-width: 100%; height: auto; border: 1px solid #ddd; padding: 5px; }
</style>
</head>
<body>
<div id="container">
<h1>现代二维码生成器</h1>
<input type="text" id="text-input" placeholder="请输入网址或文本内容">
<br>
<button id="generate-btn">生成二维码</button>
<div id="qrcode"></div>
</div>
<script>
const textInput = document.getElementById('text-input');
const generateBtn = document.getElementById('generate-btn');
const qrcodeDiv = document.getElementById('qrcode');
generateBtn.addEventListener('click', () => {
const text = textInput.value;
if (!text) {
alert('请输入内容！');
return;
}
// 清空旧二维码
qrcodeDiv.innerHTML = '';
// 1. 设置二维码类型 (0: L, 1: M, 2: Q, 3: H)
const qr = qrcode(0, 'M');
// 2. 添加数据
qr.addData(text);
// 3. 生成二维码
qr.make();
// 4. 获取 SVG 或 PNG 格式的二维码
// 这里我们使用 SVG，因为它更清晰且是矢量图
const qrImage = qr.createSvgTag({ cellSize: 4, margin: 2, scalable: true });
// 将生成的 SVG 插入到页面中
qrcodeDiv.innerHTML = qrImage;
});
// 页面加载时，默认生成一个
window.onload = () => {
textInput.value = "https://github.com";
generateBtn.click();
};
</script>
</body>
</html>
与方案二的区别：
- 引入库不同：使用的是
qrcode-generator。 - API 不同：
qrcode(0, 'M')创建一个实例，第一个参数是纠错等级 (0-3 对应 L-M-Q-H),第二个是字符集。addData()和make()是分两步操作。createSvgTag()直接生成一个包含二维码的 SVG 字符串，然后我们将其插入到div中。
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 方案一 (在线工具) | 零代码，最快上手 | 灵活性差，功能受限 | 快速生成单个二维码，不关心实现过程 |
| 方案二 (qrcode.js) | 最常用，社区支持好，功能全面 | 库文件相对较大 | 大多数网页项目，功能需求丰富 |
| 方案三 (qrcode-generator) | 性能好，文件小，支持多种输出格式 | API 略微不同，社区相对小 | 对性能和加载速度有要求的现代 Web 应用 |
对于绝大多数开发者来说，方案二 是最稳妥、最通用的选择，如果您追求极致的性能，方案三 是一个很好的替代品。
