正点原子 esp32s3使用手机控制led灯的开关

原创于 2025-07-12 20:49:00 发布 · 694 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#esp32 #arduino #led #单片机 #智能手机 #esp32s3 #platformio

单片机专栏收录该内容

20 篇文章

订阅专栏

本人是新手，刚开始接触esp32板，希望能与大家交流。

开发板使用：正点原子ATK_DNESP32S3 V1.3

IDE: VSCODE + PLATFORMIO

在VS Code新建工程，工程命名为：wifi

主板选择对应主板，这里由于没有找到正点原子对应的主板，我自已导入了一个。

实验步骤：

主板GPIO20口连led，在led上串接一个电阻，然后接回gnd接口，构成回路。让 ESP32S3 作为 WiFi 热点（AP），手机可以直接连接ESP32S3，然后控制led灯的远程控制。

实验结果：

用手机连上开发板的热点，然后通过浏览器访问http://192.168.4.1

在页面上有 on 和 off 两个按钮，当点击 on 时，通过gpio20口连接的led灯点亮。当点击 off 时，led灯灭。

新建工程：

主板选择对应主板，这里由于没有找到正点原子对应的主板，我自已导入了一个。

该页面可以点击以下图标打开：

然后，在src目录下的main.cpp编辑代码：

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

const char* ssid = "ESP32S3_LED";
const char* password = "12345678";
const int ledPin = 20; // GPIO20

WebServer server(80);

void handleRoot() {
  bool ledState = digitalRead(ledPin);
  String html = "<html><head><title>LED Control</title>";
  html += "<style>";
  html += "body{font-size:3em;text-align:center;margin-top:60px}";
  html += ".btn{font-size:3em;padding:40px 80px;margin:30px;background-color:green;";
  html += "color:white;border:none;border-radius:20px;cursor:pointer}";
  html += ".active{background-color:red}";
  html += "</style></head><body>";
  html += "<h1>LED Control</h1>";
  
  // ON button
  html += "<a href='/on'><button class='btn";
  html += ledState ? " active" : "";
  html += "'>ON</button></a>";
  
  // OFF button
  html += "<a href='/off'><button class='btn";
  html += !ledState ? " active" : "";
  html += "'>OFF</button></a>";
  
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void handleOn() {
  digitalWrite(ledPin, HIGH);
  handleRoot();
}

void handleOff() {
  digitalWrite(ledPin, LOW);
  handleRoot();
}

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);

  WiFi.softAP(ssid, password); // 启动AP模式
  Serial.println("WiFi AP started.");
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());

  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.begin();
}

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

代码详解：

WebServer server(80);

创建一个 Web 服务器对象，监听 80 端口。

handleRoot() 函数

生成网页，显示两个按钮（ON/OFF），根据 LED 当前状态高亮对应按钮。
按钮样式设置成大且明显，以适应手机浏览。

void handleOn() {
  digitalWrite(ledPin, HIGH);
  handleRoot();
}

void handleOff() {
  digitalWrite(ledPin, LOW);
  handleRoot();
}

/on 路径点亮 LED 并刷新主页。
/off 路径关闭 LED 并刷新主页。

  WiFi.softAP(ssid, password); // 启动AP模式
  Serial.println("WiFi AP started.");
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());

WiFi.softAP(ssid, password);
让 ESP32S3 作为 WiFi 热点（AP模式），创建名为 ESP32S3_LED、密码为 12345678 的无线网络。手机等设备可以直接连接这个 WiFi。
Serial.println("WiFi AP started.");
在串口输出“WiFi AP started.”，提示热点已启动。
Serial.print("IP address: "); Serial.println(WiFi.softAPIP());
在串口输出热点的 IP 地址（通常是 192.168.4.1），方便在浏览器访问控制页面。
server.on("/", handleRoot);
设置 Web 服务器，当访问根路径 / 时，调用 handleRoot()，显示控制页面。
server.on("/on", handleOn);
设置 Web 服务器，当访问 /on 时，调用 handleOn()，点亮 LED。
server.on("/off", handleOff);
设置 Web 服务器，当访问 /off 时，调用 handleOff()，关闭 LED。
server.begin();
启动 Web 服务器，开始监听 HTTP 请求。