2026 寒假 任务02 “我想用 ESP32 做一个 Web 服务器。用 C++ 代码：
让 ESP32 使用 AP 模式（Access Point）启动一个 Web Server，当手机访问 ESP32 的 IP 地址时，显示两个按钮 “ON” 和 “OFF”。点击按钮可以通过 GPIO 控制面包板上外接的 LED 灯（假设接在 GPIO 23）。”
方案思路：ESP32 自己做“路由器”
在这个模式下，ESP32 不去连接自己家里的 WiFi，而是它自己发射一个 WiFi 热点。
- 手机搜索并连接 ESP32 发出的 WiFi。
- 连接后，直接访问 ESP32 的地址控制灯光。
优点：这样我们走到哪里都能演示，完全不需要依赖环境的 WiFi。
第一部分：接线与“如何让它好看”
“感觉不好看”，通常是因为面包板上的杜邦线飞来飞去乱糟糟的。
1. 极简方案（最“好看”）
直接使用板载 LED（GPIO 2）。
- ESP32 开发板上自带了一颗蓝灯，通常连接在 GPIO 2。
- 你可以完全不接外面的线，代码里把 LED_PIN 改成 2，直接看板子上的灯亮灭，最整洁。
2. 外接 LED 优化方案（让面包板接线整齐）
如果你必须外接 LED（假设 GPIO 23），可以尝试**“紧凑型”接法**，避免使用很长的飞线。
电路逻辑：
GPIO 23 –> LED 正极 (长脚) –> LED –> LED 负极 (短脚) –> 电阻 –> GND
实物插法建议（以此顺序插在面包板上）：
- LED：跨插在面包板的两排孔上（比如长脚插 e10，短脚插 e11）。
- 电阻：一端插在 a11 (对应 LED 短脚)，另一端插在 GND 所在的蓝色电源导轨上（如果电阻脚够长，直接跨过去，不用线）。
- 跳线：只需要一根短线，从 ESP32 的 D23 插到 a10 (对应 LED 长脚)。
这样在这个小区域内就形成了一个回路，线尽可能短，看起来会专业很多。
第二部分：AP 模式代码
请将 src/main.cpp 的内容替换为以下代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
#include <Arduino.h>
#include <WiFi.h>
#include <WebServer.h>
// ================= 配置区域 =================
// 这次我们设置 ESP32 自己发出的 WiFi 名字和密码
const char* ap_ssid = "My_ESP32_Control"; // 手机搜到的 WiFi 名字
const char* ap_password = "12345678"; // 连接这个 WiFi 的密码（至少8位）
// 选择 LED 引脚
// 如果想最整洁，用板载 LED (通常是 2)，如果外接用了 23 就写 23
#define LED_PIN 2
// ===========================================
WebServer server(80);
// HTML 页面代码（保持不变）
String getHTML()
{
String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32 控制台</title>
<style>
body { font-family: Helvetica; text-align: center; margin-top: 50px; background-color: #f0f0f0;}
h1 { color: #333; }
.btn {
display: inline-block; padding: 20px 40px; font-size: 30px;
color: white; text-decoration: none; border-radius: 10px; margin: 20px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.on { background-color: #4CAF50; }
.off { background-color: #f44336; }
</style>
</head>
<body>
<h1>💡 灯光控制中心</h1>
<a href="/on" class="btn on">开启 ON</a>
<br>
<a href="/off" class="btn off">关闭 OFF</a>
</body>
</html>
)rawliteral";
return html;
}
void handleRoot()
{
server.send(200, "text/html", getHTML());
}
void handleLedOn()
{
digitalWrite(LED_PIN, HIGH);
Serial.println("LED ON");
server.send(200, "text/html", getHTML());
}
void handleLedOff()
{
digitalWrite(LED_PIN, LOW);
Serial.println("LED OFF");
server.send(200, "text/html", getHTML());
}
void setup()
{
Serial.begin(115200);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
// === 核心变化：启动 AP 模式 ===
Serial.println("\n正在启动 AP 模式...");
// 设置 ESP32 为 AP 模式
WiFi.softAP(ap_ssid, ap_password);
// 获取 ESP32 自己的 IP 地址（AP 模式下通常默认是 192.168.4.1）
IPAddress IP = WiFi.softAPIP();
Serial.print("AP 启动成功! WiFi 名称: ");
Serial.println(ap_ssid);
Serial.print("请手机连接该 WiFi，然后访问: http://");
Serial.println(IP);
server.on("/", handleRoot);
server.on("/on", handleLedOn);
server.on("/off", handleLedOff);
server.begin();
}
void loop()
{
server.handleClient();
}
|
第三步：如何操作
1. 烧录代码
构建完点击 VS Code 底部的 右箭头图标 (→) 进行烧录。
2. 手机操作
- 打开手机的 设置 → 无线局域网 (Wi-Fi)。
- 在列表里查找
My_ESP32_Control（或者你自己设定的热点名称）。
- 输入密码
12345678 进行连接。
注意：手机可能会提示“该网络无法连接互联网”，这是正常的，选择“保持连接”即可。
3. 控制设备
- 打开手机浏览器。
- 在地址栏输入
192.168.4.1（这是 ESP32 在 AP 模式下的默认固定地址）。
- 你将会看到一个 Web 控制页面，点击页面上的按钮即可远程控制灯光！