30分钟搞定网站二维码生成，省下建站公司三天工时
改个需求建站公司拖一周，你不是一个人。我之前接手一个电商客户，他们只改了首页导航的字体颜色，结果被拖了整整三天。后来我自己搞，用开源工具半小时就搞定。今天教你怎么制作一个网站的二维码，全程不花一分钱，多少钱都省下来了。
项目背景与需求
我们做的是一个B2B类的外贸网站，客户主要用户是海外客户，他们经常需要在手机端访问官网，或者通过扫描二维码进入产品详情页。客户提出一个需求：网站主页面必须生成二维码，方便客户在展会、宣传册、名片上使用。
一开始我联系了两家建站公司，一个报价5000元，理由是“需要后端生成动态二维码”，另一个报价3000元，说“用现有工具生成静态二维码就可以了”。我一听就心里有数，这两个报价都高了。因为实际上，怎么制作一个网站的二维码，根本不需要额外开发，用开源工具就能实现。
核心需求梳理
- 二维码内容：网站主页面地址（https://www.example.com）
- 二维码类型：静态二维码（无需动态参数）
- 二维码格式：PNG（兼容性高）
- 二维码尺寸：300x300px（适配手机端显示）
- 二维码样式：自定义背景色、边框、Logo（可选）
技术选型
既然我们只需要生成一个静态二维码，技术选型上完全可以用开源工具完成。不需要引入后端语言如PHP或Node.js，也不需要数据库存储，多少钱都省下来了。
推荐工具：QRCode.js + GitHub开源库
我选用了QRCode.js这个开源库，它是GitHub上非常成熟的一个二维码生成库，代码轻量，兼容性好，支持自定义样式。GitHub项目地址是：https://github.com/davidshimjs/qrcodejs
优点总结
- 无需服务器：客户端生成，不依赖后端
- 自定义样式：支持背景色、边框、Logo嵌入
- 代码简洁：5行代码就能生成二维码
- 跨平台兼容：支持所有现代浏览器
核心实现：代码实现与配置
第一步：引入QRCode.js
你可以通过CDN引入QRCode.js，也可以直接下载源码。我这里用CDN方式，方便快捷。
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
第二步：创建HTML容器
在HTML中创建一个<div>容器，用于显示生成的二维码：
<div id="qrcode" style="width: 300px; height: 300px;"></div>
第三步：用JavaScript生成二维码
接下来用JavaScript调用QRCode.js的API，生成二维码：
const qrcode = new QRCode("qrcode", {text: "https://www.example.com", // 你的网站URLwidth: 300,height: 300,colorDark : "#000000", // 黑色colorLight : "#ffffff", // 白色correctLevel : QRCode.CorrectLevel.H // 容错率高，适合打印
});
第四步：样式美化（可选）
如果你希望二维码带Logo或边框，可以通过CSS实现。例如：
#qrcode {border: 4px solid #007BFF;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
第五步：导出二维码为PNG（可选）
如果你需要将二维码保存为图片，可以使用HTML2Canvas库，将二维码容器转成PNG图片并下载：
html2canvas(document.getElementById('qrcode')).then(canvas => {const link = document.createElement('a');link.download = 'qrcode.png';link.href = canvas.toDataURL();link.click();
});
注意：需要引入html2canvas库，可以使用CDN：
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
上线与优化
二维码部署方式
你可以将生成的二维码图片直接部署在网站上，或者通过前端代码动态生成。如果是动态生成的二维码，可以考虑使用后端语言，但对于我们这个案例，静态生成已经足够。
SEO优化建议
- 添加Alt标签：在二维码图片上添加
alt="官网二维码"，利于搜索引擎识别。 - 内链优化：将二维码链接到主页面，可以提升页面权重。
- 移动端适配：确保二维码在手机端显示清晰，避免模糊。
- A/B测试：尝试在不同位置放置二维码（如首页顶部、底部、产品页），测试点击率。
网站安全与备案
如果你的网站是备案过的国内网站，记得在生成二维码后检查是否已部署SSL证书。如果你使用的是阿里云或腾讯云，可以在控制台查看证书状态。SSL证书是网站安全的基础，也是SEO的重要指标之一。
域名与服务器配置
如果你是用VPS或者云服务器，确保域名解析正确，服务器支持HTTPS。如果你用的是WordPress，可以在后台安装SSL插件，如Really Simple SSL，一键开启HTTPS。
经验总结
1. 不需要请开发做二维码
很多建站公司会借机收取“动态二维码生成”费用，其实怎么制作一个网站的二维码，用开源工具就能搞定。别再被“开发费”骗了。
2. 节省时间与成本
用QRCode.js等开源库，多少钱都不用花，开发时间节省70%以上。适合快速上线、测试、迭代。
3. 自定义样式提升用户体验
二维码不一定要单调，自定义背景、边框、Logo，能提升品牌识别度。尤其适合外贸网站，客户在展会或名片上扫码时，一眼就能认出你的品牌。
4. GitHub开源库是可靠的参考
像QRCode.js这类GitHub开源项目，都是经过广泛验证的，代码稳定、文档齐全，是技术选型的优质来源。在开发中遇到问题，直接去GitHub找issue和solution，比找建站公司靠谱得多。
5. 备案与证书不能忽视
虽然我们只讲了二维码生成，但网站上线前一定要完成ICP备案和SSL证书安装。这是国内建站的硬性要求，也是SEO和网站安全的基础。
