ESP8266APWeb页面控制开关三个灯附详细指导视频和源码

最新推荐文章于 2025-07-05 09:36:57 发布

原创

最新推荐文章于 2025-07-05 09:36:57 发布 · 1.7k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

目的：局域网模式下，手机连接ESP8266开放的热点，通过手机浏览器访问ESP8266提供的Web服务，在打开的网站上：http://192.168.4.1直接操作按钮控制三个灯的亮和熄灭。此文章重点讲解写入ESP8266的源码。

硬件：ESP8266开发板一块、三个继电器、三个小灯、杜邦线、5V充电头、手机充电线一根

连线方案：看文章最后的详细指导视频

先看成品，手机展示界面：这里我定义了三个灯，所以展示的是三个灯的数据，如果灯是开启的状态就是开，关闭的就是关，通过操作列可以对灯进行控制

源码讲解：

调用库文件，因为需要使用ESP8266的wifi功能，所以需要wifi库，然后我们需要使用ESP8266来为我们提供Web服务，让我们用手机就可以访问它的网站，所以还需要一个webserver库

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

接下来是定义的各种变量，由于代码中有详细的注释，这里就不统一讲解，值得注意的是我们提供的web服务需要使用账号密码进行登录，所以我在这里设置了用户名和密码，在代码中是

String Setting_UserName="8266iot";//设置：用户名

String Setting_PassWord="8266iot.cn";//设置：密码

这里可以根据自己的需求进行更改，这里的密码也是我提供的物联网平台的域名，有兴趣的可以浏览器打开看看。

ESP8266WebServer esp8266_server(80);// 建立ESP8266WebServer对象，对象名称为esp8266_server
String Setting_UserName="8266iot";//设置：用户名
String Setting_PassWord="8266iot.cn";//设置：密码
const int SwitchNum=3;//有几个继电器控制几个灯就改数量
const int SwitchPin[SwitchNum]={D0,D1,D2};//定义继电器电平输出引脚
String SwichName[SwitchNum]={"A灯","B灯","C灯"};//对应更改灯或者继电器的显示名称
int SwitchStatus[SwitchNum]={0,0,0};//初始数据都是0

String login="<!DOCTYPE html><html><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>登录</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.login-container {width: 300px;padding: 40px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: center; border-radius: 50px;}.login-container h2 {margin-bottom: 20px;}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 5px;text-align: left; }.fo