PHP+JavaScript生成动态二维码（活码）教程：实现步骤与代码详解

要实现通过PHP和JavaScript生成活码（动态二维码），需要结合后端逻辑和前端交互。在此给大家介绍下基本的实现思路和步骤：

活码是一种动态二维码，可以在不改变二维码图案的情况下，动态更改其指向的内容。通常，活码会指向一个中间服务器，该服务器根据某种逻辑重定向用户到目标URL。

PHP环境：确保你的服务器支持PHP。

数据库：可选，用于存储和管理不同的URL和二维码信息。

前端开发环境：用于开发和测试JavaScript。

如果你希望存储和管理多个活码，可以创建一个简单的数据库表：

sql

	CREATE TABLE qr_codes (
	id INT AUTO_INCREMENT PRIMARY KEY,
	code_id VARCHAR(255) NOT NULL,
	target_url VARCHAR(255) NOT NULL,
	created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
	);

创建一个PHP文件，用于生成活码并存储到数据库中：

php

	<?php
	// 数据库连接
	$servername = "localhost";
	$username = "username";
	$password = "password";
	$dbname = "database_name";

	$conn = new mysqli($servername, $username, $password, $dbname);

	if ($conn->connect_error) {
	die("Connection failed: " . $conn->connect_error);
	}

	// 生成唯一code_id
	$code_id = uniqid();

	// 目标URL
	$target_url = "https://example.com"; // 替换为你的目标URL

	// 插入数据库
	$sql = "INSERT INTO qr_codes (code_id, target_url) VALUES ('$code_id', '$target_url')";

	if ($conn->query($sql) === TRUE) {
	echo "QR Code ID: " . $code_id;
	} else {
	echo "Error: " . $sql . "<br>" . $conn->error;
	}

	$conn->close();
	?>

创建一个PHP文件，用于处理重定向：

php

	<?php
	// 数据库连接
	$servername = "localhost";
	$username = "username";
	$password = "password";
	$dbname = "database_name";

	$conn = new mysqli($servername, $username, $password, $dbname);

	if ($conn->connect_error) {
	die("Connection failed: " . $conn->connect_error);
	}

	// 获取code_id
	$code_id = $_GET['code_id'];

	// 查询数据库
	$sql = "SELECT target_url FROM qr_codes WHERE code_id = '$code_id'";
	$result = $conn->query($sql);

	if ($result->num_rows > 0) {
	$row = $result->fetch_assoc();
	$target_url = $row['target_url'];
	header("Location: " . $target_url);
	} else {
	echo "QR Code not found";
	}

	$conn->close();
	?>

使用JavaScript生成二维码并显示在页面上。可以使用一个库如QRCode.js：

html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dynamic QR Code</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
	</head>
	<body>
	<div id="qrcode"></div>
	<script>
	// 假设这是从PHP生成的code_id
	const codeId = "<?php echo $code_id; ?>";
	const qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "https://yourdomain.com/redirect.php?code_id=" + codeId,
	width: 128,
	height: 128
	});
	</script>
	</body>
	</html>

通过这些步骤，你可以实现一个基本的活码生成和重定向系统。根据需求，你可以进一步扩展和优化这个系统。

行业案例专题巡检 · 宣教 · 招生 · 导览解决方案