掌握 ESP32 的 WiFi 联网、Web 路由处理与 GPIO 控制基础
使用 ESP32 搭建一个简单 Web 服务器，完成以下两部分任务：
通过本实验，掌握 ESP32 的 WiFi 联网、Web 路由处理与 GPIO 控制基础。
工具 → 开发板 → ESP32 Arduino → ESP32 Dev Module。工具 → 端口 → 选择对应串口。第一部分：仅静态页面显示
本阶段代码仅用于验证 Web 服务器的基本功能，页面上不会有控制按钮。
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";
WebServer server(80);
void handleRoot() {
String html = R"rawliteral(
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验1</title>
</head>
<body style="font-family:Arial; text-align:center; margin-top:50px;">
<h1>ESP32 Web服务器实验</h1>
<h2>第一部分：静态页面显示</h2>
<p>如果你能看到这个页面，说明实验成功。</p>
</body>
</html>
)rawliteral";
server.send(200, "text/html; charset=UTF-8", html);
}
void setup() {
Serial.begin(115200);
// 连接 WiFi
WiFi.begin(ssid, password);
Serial.print("连接WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\n连接成功");
Serial.print("访问地址: http://");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
}
void loop() {
server.handleClient();
}第二部分：网页按钮控制 LED
在第一部分的基础上，增加对 GPIO 的控制逻辑和带按钮的网页。
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";
const int LED_PIN = 2; // D2 常见为 GPIO2
WebServer server(80);
String makePage() {
String state = digitalRead(LED_PIN) ? "ON" : "OFF";
String html = R"rawliteral(
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验2</title>
</head>
<body style="font-family:Arial; text-align:center; margin-top:50px;">
<h1>第二部分：按钮控制 LED</h1>
<p>当前状态：<b>)rawliteral" + state + R"rawliteral(</b></p>
<a href="/on"><button style="padding:10px 20px;">点亮 LED</button></a>
<a href="/off"><button style="padding:10px 20px;">熄灭 LED</button></a>
</body>
</html>
)rawliteral";
return html;
}
void handleRoot() {
server.send(200, "text/html; charset=UTF-8", makePage());
}
void handleOn() {
digitalWrite(LED_PIN, HIGH);
server.sendHeader("Location", "/");
server.send(303);
}
void handleOff() {
digitalWrite(LED_PIN, LOW);
server.sendHeader("Location", "/");
server.send(303);
}
void setup() {
Serial.begin(115200);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
WiFi.begin(ssid, password);
Serial.print("连接WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\n连接成功");
Serial.print("访问地址: http://");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/on", handleOn);
server.on("/off", handleOff);
server.begin();
}
void loop() {
server.handleClient();
}http://该IP地址。也可以使用 ESP32 开启热点 (AP 模式)，手机直接连接它进行控制。
将上述代码中的 WiFi 连接部分 (setup 函数中) 替换为以下代码：
const char* ap_ssid = "ESP32-LAB";
const char* ap_pass = "12345678"; // 至少8位
WiFi.mode(WIFI_AP);
WiFi.softAP(ap_ssid, ap_pass);
Serial.println("AP已开启");
Serial.print("AP IP: ");
Serial.println(WiFi.softAPIP()); // 通常 192.168.4.1验证方法：手机连接热点 ESP32-LAB，浏览器访问 http://192.168.4.1。