Web Server 自建控制面板

2026-05-08 Friday

ESP32 WebServer库搭建HTTP服务器 · HTML控制页面 · 手机浏览器遥控LED和传感器

概述

ESP32 不仅能上网拿数据，还能自己当服务器！本篇教你搭建一个 Web 控制面板，用手机/电脑浏览器直接控制 LED、读取传感器。

学习目标

掌握 ESP32 WebServer 库
学会处理 HTTP 路由
返回 HTML 页面、接收表单参数

实战：LED 控制面板

#include <WiFi.h>
#include <WebServer.h>

WebServer server(80);

void setup() {
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);
  
  server.on("/", []() {
    server.send(200, "text/html",
      "<h1>ESP32 LED 控制</h1>"
      "<a href='/on'><button>开灯</button></a>"
      "<a href='/off'><button>关灯</button></a>");
  });
  server.on("/on", []() { digitalWrite(2, HIGH); server.send(200, "text/plain", "ON"); });
  server.on("/off", []() { digitalWrite(2, LOW); server.send(200, "text/plain", "OFF"); });
  server.begin();
}

void loop() { server.handleClient(); }

用手机连同一 WiFi，浏览器访问 ESP32 的 IP 地址即可遥控。