HTML生成二维码

小陈哥₁₇₉₈

已于 2024-12-06 11:32:25 修改

阅读量1.4k

点赞数 12

CC 4.0 BY-SA版权

文章标签： html android 前端

于 2024-12-06 10:15:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38863493/article/details/144282351

一、运用场景

二维码生成的内容可以放字符串，可以放链接，可以自己拼接一些产生者身份信息。
比如运用到招聘者身份绑定
比如生成车间扫描二维码，扫码跳转页面知道今天生产订单

效果展示：
在这里插入图片描述

二、实现

完整的代码须下载资源包
HTML代码（示例）：

<!DOCTYPE html>
<html>
<head>
    <title>二维码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 -->
    <script type="text/javascript" src="lib/jquery-qrcode-0.14.0/jquery-qrcode-0.14.0.min.js"></script>

</head>
<body class="container">
	<!-- 给个生成二维码的地方 -->
	<div class="QRCode" style="text-align:center"></div>
	
	<script type="text/javascript">
		//生成到一个div上 param1 容器，param2 二维码内容（可以放字符串，可以放链接）
		createQrcode($(".QRCode"), "https://www.baidu.com");
		function createQrcode($divObj, text, render) {
			if (!render) { render = "image"; }
			$divObj.html("").qrcode({
				render: render,
				size: 305,
				color: "#3a3",
				ecLevel: "Q",
				quiet: 2,
				radius: 0.4,
				mode: 0,
				mSize: 0.2,
				text: text
			});
		}
	</script>
</body>
</html>