ESP8266+网页控制板载LED

欣薇电子

已于 2025-03-14 15:48:27 修改

阅读量975

点赞数 25

文章标签：嵌入式硬件单片机

于 2025-03-07 10:58:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34426854/article/details/146086372

版权

一、准备工作

硬件清单：esp8266开发板、数据线、电脑

arduino ide软件下载及esp8266环境搭建：

教程可参考文章：Arduino IDE搭建ESP32或ESP8266开发环境（附离线安装包）

二、代码部分

完整代码：

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// 定义LED引脚
const int ledPin = 2;  // 板载LED为GPIO2，也就是D4引脚

// 创建Web服务器对象，监听80端口
ESP8266WebServer server(80);

// Wi-Fi凭证
const char* ssid = "wodewifi";      // 替换为你的Wi-Fi名称
const char* password = "nidemima";  // 替换为你的Wi-Fi密码

// 处理根路径请求
void handleRoot() {
  String html = "<!DOCTYPE html><html><head><title>ESP8266 LED Control</title>";
  html += "<style>";
  html += "body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }";
  html += "h1 { font-size: 3em; }";  // 放大标题
  html += "p { font-size: 2em; }";   // 放大段落文字
  html += "button { font-size: 1.5em; padding: 10px 20px; margin: 10px; }";  // 放大按钮
  html += "</style>";
  html += "</head><body>";
  html += "<h1>ESP8266 LED Control</h1>";
  html += "<p>LED State: <a href=\"/ledon\"><button>ON</button></a> <a href=\"/ledoff\"><button>OFF</button></a></p>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

// 处理LED打开请求
void handleLedOn() {
  digitalWrite(ledPin, LOW);  // LED低电平点亮
  server.sendHeader("Location", "/");  // 重定向回根路径
  server.send(303);  // 303 See Other
}

// 处理LED关闭请求
void handleLedOff() {
  digitalWrite(ledPin, HIGH);  // LED高电平熄灭
  server.sendHeader("Location", "/");  // 重定向回根路径
  server.send(303);  // 303 See Other
}

void setup() {
  // 初始化串口
  Serial.begin(115200);

  // 设置LED引脚为输出模式
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, HIGH);  // 初始状态关闭LED

  // 连接Wi-Fi
  WiFi.begin(ssid, password);
  Serial.print("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println();
  Serial.println("Connected to Wi-Fi");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // 设置服务器路由
  server.on("/", handleRoot);       // 根路径
  server.on("/ledon", handleLedOn); // 打开LED
  server.on("/ledoff", handleLedOff); // 关闭LED

  // 启动服务器
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  // 处理客户端请求
  server.handleClient();
}

代码修改：程序中的wifi名称与密码需要修改成自己实际使用的，不要出现中文，可以是路由器网络，也可以是手机热点，只支持2.4G频段网络，可以使用4G，但不支持5G。