400-800-9870

h5页面生成二维码

更新时间：2024-12-07 16:09:43 作者：八木屋

要在HTML5页面中生成二维码，你可以使用JavaScript库，例如 qrcode.js。这个库可以方便地生成二维码并嵌入到你的HTML页面中。以下是一个简单的示例，展示如何在HTML5页面中使用 qrcode.js 来生成二维码。

步骤

引入 qrcode.js 库

你可以通过CDN引入 qrcode.js 库，也可以下载并本地引入。这里我们通过CDN引入：

html复制代码

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>生成二维码</title>
	<script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
	</head>
	<body>
	<!-- 放置二维码的容器 -->
	<div id="qrcode"></div>

	<script>
	// 生成二维码的函数
	function generateQRCode(text) {
	var qrcodeElement = document.getElementById("qrcode");
	new QRCode(qrcodeElement, {
	text: text,
	width: 128,
	height: 128
	});
	}

	// 调用函数生成二维码，传入你想要编码的文本
	generateQRCode("https://www.example.com");
	</script>
	</body>
	</html>

解释

自定义

你可以根据需要调整二维码的大小、颜色等属性。例如，你可以通过CSS来设置二维码容器的样式，或者通过 options 对象来设置二维码的前景色和背景色：

javascript复制代码

	new QRCode(qrcodeElement, {
	text: text,
	width: 150,
	height: 150,
	colorDark: "#000000", // 前景色（二维码的颜色）
	colorLight: "#ffffff", // 背景色
	correctLevel: QRCode.CorrectLevel.H // 纠正级别（H为最高）
	});