局域网网页控灯验收：ESP-IDF v6.1 用 STA IP 开灯 / 关灯

局域网网页控灯验收：ESP-IDF v6.1 用 STA IP 开灯 / 关灯

级别：实战篇（免费）
适合谁读：已按本系列完成SoftAP 配网，固件自带HTTP 设备页 + 板载灯控制的读者。
适用：Windows 10/11；ESP-IDFv6.1；乐鑫ESP32-S3-DevKitC-1（板载 RGB 常见丝印RGB@IO38）；演示工程文中称wifi_led。
目标：在同一局域网内，用浏览器完成「开灯 → 关灯」验收；分清SoftAP 配网地址与STA 局域网 IP。

上一篇（SoftAP 配网）：SoftAP 配网在干什么
文 03：工程路径、set-target 与 sdkconfig
文 02：COM 口与 hello_world 烧录
文 01：Flash 配置容量与实物不一致
文 00：Windows 上从零搭 ESP-IDF

本文只讲局域网网页控灯的现象与验收。温湿度、MQTT、小程序留给后面篇章。

摘要：SoftAP 只负责把家用 Wi‑Fi 交给板子；正式控灯请用路由器分配的STA 局域网 IP。手机与板同网后，浏览器打开http://<STA局域网IP>/，点开灯 / 关灯，板载 RGB 应同步亮灭。

演示工程：文中称wifi_led（设备网页 + 控灯）。实机需固件已能打开 HTTP 页并控制板载灯。

建议配图（发布时插入）：

1. 串口打印 STA 局域网 IP 的日志截图
2. 浏览器打开控制网页的截图
3. 板载 RGB 亮 / 灭实拍

一、前置准备

开始前请确认：

1. 固件已烧录；串口监视可用（波特率常见115200）。
2. 已按文 04完成 SoftAP 配网，板子已连上家用路由器主 Wi‑Fi（不是访客网）。
3. 串口能看到有效STA 局域网 IP（示意：STA got IP:192.168.1.47），且无反复重连。
4. 手机关闭移动数据，连同一路由器主 Wi‑Fi；避开访客网 / AP 隔离。
5. 控制对象是板载 RGB（常见GPIO38），不是电源指示灯。

查看 COM 口：Windows →Win + X → 设备管理器 → 端口 (COM 和 LPT)。
本系列常见为COM3，以你机器为准。

可选监视：

.'C:\Espressif\tools\Microsoft.v6.1.PowerShell_profile.ps1'cd F:\esp\projects\wifi_led idf.py-p COM3 monitor

退出监视请按：Ctrl + ]。

说明：STA 局域网 IP 看开发板串口日志，不是电脑上的ipconfig。

二、验收目标

同时满足即通过：

1. 手机已连家里路由器，并能打开设备页。
2. 页面能看到灯状态（如 ON / OFF，文案以固件为准）。
3. 点开灯后，板载 RGB肉眼可见点亮。
4. 点关灯后，灯熄灭。
5. 刷新页面（或等自动刷新）后，状态与实物大致一致。

可选加分：串口出现与控灯相关的业务输出。

三、业务链路与两种网络模式

3.1 请求链路（记这一句）

手机浏览器 → 家里 Wi‑Fi → 开发板 HTTP Server → GPIO → 板载 RGB

3.2 SoftAP 与 STA：用途不同

关键词强调：

• SoftAP 配网：手机先连板子热点，再把家用 Wi‑Fi 交给板子。
• STA 局域网访问：手机与板都连家里路由器，用STA 局域网 IP打开页面控灯。

SoftAP 仅用于首次（或换网）配网；板子以 STA 接入家用网后，日常控灯请用STA 局域网 IP。
掉电后如何记住 Wi‑Fi（NVS）见下一篇，敬请期待。

官方 HTTP Server（ESP-IDF v6.1）：
https://docs.espressif.com/projects/esp-idf/zh_CN/v6.1/esp32s3/api-reference/protocols/esp_http_server.html

四、分步实操

4.1 拿到 STA 局域网 IP

任选其一：

1. 串口：查找类似STA got IP:192.168.1.47，记下该地址。
2. 设备页：若状态区已显示当前 IP / SSID，可直接抄。
3. 路由器管理页：查该设备分配到的地址。

确认：板子已是STA 已入网，不是「只会发 SoftAP、从未连上路由器」。

下文将该地址写作<STA局域网IP>。

4.2 手机回到家里主 Wi‑Fi

1. 若还连着WIFI-LED-xxxx，先断开。
2. 连家里主 Wi‑Fi（与板同一路由器；勿用访客网）。
3. 关闭移动数据，减少系统乱切网。

4.3 用浏览器打开控制页

地址栏输入（示例）：

http://192.168.1.47/

规范：

• 必须是http://，不要用https://
• 不要加www.
• 默认 80 端口时不要乱加端口号
• 部分浏览器会自动补全www.，请手动删掉

【图1】
图1 串口中的 STA 局域网 IP（示意）。

【图2】
图2 浏览器打开设备控制页（示意）。

4.4 开灯 / 关灯

在页面「控灯」区（文案以固件为准）：

1. 先看当前状态（ON / OFF）。
2. 点开灯→ 板载 RGB 点亮（常见 GPIO38）。
3. 点关灯→ 灯熄灭。
4. 手动刷新，或等待自动刷新（演示常见约5 秒），核对页面状态与实物一致。

【图3】
图3 开灯后板载 RGB 实拍（示意）。

以肉眼看灯为准；状态文字可有短延迟。

4.5 （可选）SoftAP 对照

1. 手机改连 SoftAP 热点。
2. 打开常见http://192.168.4.1/。
3. 再试开灯 / 关灯。

能控通，只说明配网页与控灯页可能同属一套 HTTP 服务。
正式验收仍以家里网 + STA 局域网 IP 为准。

五、两种访问方式怎么选

边界再强调一次：

• 192.168.4.1→ 配网 / 调试入口
• STA 局域网 IP→ 本文正式控灯入口

六、关键前置校验项

开始点按钮前，建议再勾一遍：

1. 串口已打出有效STA 局域网 IP，无反复重连。
2. 手机与开发板同一局域网；路由器未开AP 隔离；未用访客网。
3. HTTP 服务正常：页面能打开；板子未陷入 Flash 配错导致的重启循环（见文 01）。
4. 看的是板载 RGB（GPIO38），不是电源灯。

官方 DevKitC-1 用户指南：
https://docs.espressif.com/projects/esp-dev-kits/zh_CN/latest/esp32s3/esp32-s3-devkitc-1/user_guide.html

七、验收勾选清单

1. • 已确认 STA 入网，并记录STA 局域网 IP
2. • 手机连家里主 Wi‑Fi（与板同网，非访客网）
3. • 浏览器能打开http://<STA局域网IP>/
4. • 点开灯 → RGB 亮
5. • 点关灯 → RGB 灭
6. • 刷新后页面状态与实物大致一致

八、常见问题排查

九、小结

1. SoftAP 配网与STA 局域网访问是两件事；本文主路径是后者。
2. 正式控灯地址：http://<STA局域网IP>/（http、无 www、默认不乱加端口）。
3. 验收看板载 RGB 亮灭，不要和电源灯混淆。
4. 下一篇预告：掉电后能否记住 Wi‑Fi（NVS）——敬请期待。

官方参考（ESP-IDF v6.1）：

• HTTP Server：https://docs.espressif.com/projects/esp-idf/zh_CN/v6.1/esp32s3/api-reference/protocols/esp_http_server.html
• DevKitC-1：https://docs.espressif.com/projects/esp-dev-kits/zh_CN/latest/esp32s3/esp32-s3-devkitc-1/user_guide.html

我们准备基于 ESP 开发板做一些实用的小产品，欢迎对照实践，并在评论区交流。

系列博文

• 文 00 Windows 搭 ESP-IDF / 选板
• 文 01 Flash 配错导致重启
• 文 02 COM 口与 hello_world 烧录
• 文 03 工程路径、set-target、sdkconfig
• 文 04 SoftAP 配网现象级
• 文 05（本文）局域网网页控灯验收