实验材料
- ESP32 板子
- LED
- 220Ω电阻
- 面包板
实验思路
1. 设备联网
首先让 ESP32 与电脑或手机通信，主要有两种方式：连接路由器（STA 模式）或自建热点（SoftAP 模式）。建议新手优先选择热点模式，无需依赖外部路由器，手机直接连接即可。
2. Web 服务器配置
本质是监听 80 端口，接收浏览器请求并返回内容。需初始化 WebServer 库，绑定不同路径的处理函数：访问根路径 / 返回带控制按钮的网页，访问 /on 执行开灯，访问 /off 执行关灯。
3. 网页设计
核心为两个按键，点击后触发对应 HTTP 请求。HTML 结构简单，包含样式美化及动态状态显示。使用 <a> 标签包裹 <button>，点击跳转至 /on 或 /off。
4. 硬件联动
收到 /on 请求时将 GPIO 设为高电平，/off 设为低电平。操作后重定向回根路径，保持用户体验流畅。
代码实现
#include <WiFi.h>
#include <WebServer.h>
#define ledPin 2
const char* ssid = "你的 WiFi 名称";
const char* password = "你的 WiFi 密码";
WebServer server(80);
void handleRoot() {
String ledState = digitalRead(ledPin) ? "开启" : "关闭";
String html = "<!DOCTYPE html><html lang='zh-CN'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>ESP32 LED 控制</title><style>body{font-family:Arial,sans-serif;text-align:center;margin-top:50px}.btn{padding:15px 30px;font-size:20px;margin:10px;border:none;border-radius:8px;cursor:pointer}.on{background-color:#4CAF50;color:white}.off{background-color:#f44336;color:white}.status{font-size:24px;margin:20px 0;color:#333}</style></head><body><h1>ESP32 LED 控制器</h1><div>当前状态：LED " + ledState + ;
server.(, , html);
}
{
(ledPin, HIGH);
Serial.();
server.();
}
{
(ledPin, LOW);
Serial.();
server.();
}
{
Serial.();
(ledPin, OUTPUT);
(ledPin, LOW);
WiFi.(ssid, password);
num = ;
(WiFi.() != WL_CONNECTED && num < ) {
Serial.();
();
num++;
}
(WiFi.() == WL_CONNECTED) {
Serial.(WiFi.());
} {
Serial.();
();
}
server.(, handleRoot);
server.(, callbackOn);
server.(, callbackOff);
server.();
}
{
server.();
}
