网硕互联帮助中心一.实验材料
1.esp32板子
2.led
3.220欧的电阻
4.面包板
二.实验思路
其实做这个实验的核心就是让 ESP32 既当 “WiFi 热点 / 联网设备”，又当 “Web 服务器”，还能响应网页的操作去控制硬件，说白了就是把 “网络请求” 和 “GPIO 引脚控制” 串起来，具体拆成这几步想就很清晰：
1. 先想清楚 “怎么让设备联网”
首先得让 ESP32 能和电脑 / 手机通信，最直接的就是两种方式：要么让 ESP32 连家里的路由器（STA 模式），要么让它自己建个 WiFi 热点（SoftAP 模式）。新手做的话优先选热点模式，不用依赖路由器，手机直接连 ESP32 的热点就能通信，少了 “找路由器 IP、配网络” 的麻烦，先把核心功能跑通再说。
2. 再想 “怎么让 ESP32 变成 Web 服务器”
Web 服务器的本质就是 “监听 80 端口，接收浏览器的请求，返回对应的内容”。所以第一步要初始化 WebServer 库，指定监听 80 端口；然后给不同的 “访问路径” 绑定对应的处理函数 —— 比如访问根路径 “/” 就返回带按键的网页，访问 “/on” 就执行开灯操作，访问 “/off” 就执行关灯操作。这里的关键是：浏览器点一下按键，其实就是给 ESP32 发了一个 HTTP 请求，ESP32 识别请求的路径，就知道该做什么了。
3. 接着想 “网页该怎么写”
网页不用搞复杂，核心就是两个按键，点一下能触发对应的请求。首先 HTML 要简单，加个样式让按键好看点（新手也能看懂），还要动态显示当前 LED 状态 —— 比如开灯后网页上能显示 “当前状态：开启”，这样用户能直观看到效果。按键的实现很简单，用<a>标签套<button>，点击后跳转到 “/on” 或 “/off” 路径，本质就是让浏览器给 ESP32 发这个路径的请求。
4. 最后把 “网络请求” 和 “硬件控制” 绑起来
ESP32 收到 “/on” 请求时，就把控制 LED 的 GPIO 引脚设为高电平（开灯）；收到 “/off” 请求时，把引脚设为低电平（关灯）。操作完硬件后，一定要重定向回根路径，这样用户点完按键会自动回到带状态的主页，而不是停留在空白的 “/on” 页面，体验更顺。
三.实验代码
#include <WiFi.h>
#include <WebServer.h>
#define ledpin 2
const char* ssid="你的WiFi名称";
const char* password="你的WiFi密码";
WebServer server(80);
void handleRoot() {
// 获取当前LED状态
String ledState = digitalRead(ledpin) ? "开启" : "关闭";
// 构建HTML页面内容
String html = "<!DOCTYPE html>";
html += "<html lang='zh-CN'>";
html += "<head>";
html += "<meta charset='UTF-8'>";
html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
html += "<title>ESP32 LED控制</title>";
html += "<style>";
html += "body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }";
html += ".btn { padding: 15px 30px; font-size: 20px; margin: 10px; border: none; border-radius: 8px; cursor: pointer; }";
html += ".on { background-color: #4CAF50; color: white; }";
html += ".off { background-color: #f44336; color: white; }";
html += ".status { font-size: 24px; margin: 20px 0; color: #333; }";
html += "</style>";
html += "</head>";
html += "<body>";
html += "<h1>ESP32 LED控制器</h1>";
html += "<div class='status'>当前状态：LED " + ledState + "</div>";
// 开灯按键，点击后访问/on路径
html += "<a href='/on'><button class='btn on'>开灯</button></a>";
// 关灯按键，点击后访问/off路径
html += "<a href='/off'><button class='btn off'>关灯</button></a>";
html += "</body>";
html += "</html>";
// 发送HTML页面给客户端
server.send(200, "text/html", html);
}
void callbackon(){
digitalWrite(ledpin,HIGH);
Serial.println("开灯");
}
void callbackoff(){
digitalWrite(ledpin,LOW);
Serial.println("关灯");
}
void setup(){
Serial.begin(115200);
pinMode(ledpin,OUTPUT);
digitalWrite(ledpin,LOW);
WiFi.begin(ssid,password);
int num=0;
while(WiFi.status()!=WL_CONNECTED&&num<100){
Serial.print(".");
delay(50);
num++;
}
if(WiFi.status()==WL_CONNECTED){
Serial.println(WiFi.localIP());
}
else{
Serial.println("连接失败");
while(1);
}
server.on("/",handleRoot);
server.on("/on",callbackon);
server.on("/off",callbackoff);
server.begin();
}
void loop(){
server.handleClient();
}
（粗糙代码）
代码里的收获：
1.server.on 是用来实现点击html页面上的设定按键，调用函数，达到开关灯，和进入原始界面的效果
2.server.handleClient() 是用来持续保持监听的
四.实验图片
五.遇到的问题与解决
做这个 ESP32 Web 服务器控制 LED 的实验，看似简单，但新手很容易卡在各种小问题上，我把实操中遇到的核心问题和对应的解决办法整理如下：
问题 1：连接 ESP32 热点后，浏览器访问 IP 地址一直打不开网页
现象：手机 / 电脑连好了 ESP32 的 WiFi 热点，输入串口显示的 IP（比如 192.168.4.1），浏览器提示 “无法访问”“连接超时”。排查 & 解决：
问题 2：网页能打开，但点击 “开灯 / 关灯” 按键没反应，LED 不亮
现象：网页加载正常，能看到按键和状态，但点击按键后，LED 没变化，网页状态也不更新。排查 & 解决：
问题 3：HTML 页面显示乱码（中文变成问号 / 方块）
现象：网页里的 “开灯”“当前状态” 等中文显示异常，英文正常。排查 & 解决：核心是没加字符编码声明！在 HTML 的<head>里必须加<meta charset='UTF-8'>，而且要放在<head>的最前面，ESP32 返回 HTML 时，浏览器才会用 UTF-8 解码中文。另外，Arduino IDE 编写代码时，要确保文件编码也是 UTF-8（IDE 顶部 “文件”->“首选项”，确认 “编码” 选 UTF-8）。
问题 4：代码上传失败，提示 “端口被占用” 或 “无法连接开发板”
现象：点击上传后，IDE 提示 “Failed to upload”，串口监视器也打不开。排查 & 解决：
问题 5：网页点击按键后，跳转到空白页面，不返回主页
现象：点击 “开灯” 后，浏览器跳转到http://192.168.4.1/on，页面空白，需要手动刷新才能看到状态变化。排查 & 解决：忘记加重定向代码！在“开灯”()和“关灯”()函数里，必须加server.redirect("/");，让 ESP32 处理完 GPIO 操作后，自动跳回根路径（主页），而不是停留在 /on 或 /off 路径（这两个路径没有返回任何 HTML 内容）。
评论前必须登录！
注册