【亲测免费】 jQuery QRCode 教程

2026-01-16 09:20:43作者：尤峻淳Whitney

1. 项目介绍

jquery-qrcode 是一个基于jQuery的插件，用于在浏览器环境中生成纯HTML的二维码（QRCode），无需依赖外部服务或下载图像。该插件体积小巧，经过压缩和gzip处理后小于4KB，可快速融入你的网页设计，提供灵活的尺寸设置。

2. 项目快速启动

安装与引入

首先，你需要在HTML文件中引入jQuery库以及jquery.qrcode.min.js插件文件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery QRCode 示例</title>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
    <!-- 用于放置二维码的div -->
    <div id="qrcode"></div>

    <script>
        // 生成二维码
        $(function() {
            $('#qrcode').qrcode({
                text: '这是你的二维码内容'
            });
        });
    </script>
</body>
</html>

参数设置

你可以自定义二维码的宽度和高度，如：

$('#qrcode').qrcode({
    width: 128,
    height: 128,
    text: '自定义的内容'
});

3. 应用案例和最佳实践

示例：结合图片居中

如果你希望在二维码中央显示一张图片，你可以这样实现：

<div id="qrcode-container">
    <img id="qrcode-image" src="your-image-url.png" />
</div>

<script>
$(function() {
    var qrWidth = 128;
    var qrHeight = 128;
    $('#qrcode-image').qrcode({
        width: qrWidth,
        height: qrHeight,
        text: '你的二维码数据'
    });

    var imgWidth = $('#qrcode-image').width();
    var imgHeight = $('#qrcode-image').height();

    $('#qrcode-image').css({
        'margin-left': -(imgWidth / 2),
        'margin-top': -(imgHeight / 2)
    });
});
</script>