lion of blog/
Arduino Esp8266 Web LED控制
Search

Arduino Esp8266 Web LED控制

Title
Arduino Esp8266 Web LED控制
Date
May 14, 2023
notion image
arduino esp8266 web控制和LED控制:
web.ino
#include <DHT.h>
#include <DHT_U.h>

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

#define DHTPIN 12

const char *ssid = "essid",
           *password = "password";

ESP8266WebServer server(80);


const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {

    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}



void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}


void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();


    WiFi.begin(ssid,password);

    while(WiFi.status() != WL_CONNECTED){
      delay(500);
      Serial.print(".");
    }
    Serial.println("");
    Serial.println("wifi connected");
    Serial.println("IP address:");
    Serial.println(WiFi.localIP());
 

    server.on("/", handleRoot);
  
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
 

    server.begin();
}

void loop() {
    server.handleClient();
}
index.html
<!doctype html>

<html>
    <head>
        <meta charset='UTF-8' />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"> -->
        <!-- <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" /> -->
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <title>智能家居控制平台</title>

        <style>
        body{height: 100vh;justify-content: center;align-items: center;background-color: #efeeee;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        </style>
    </head>

    <body>
        <div class="container">
            <center>
            <h2>智能家居控制平台</h2>
            <svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb"
                viewBox="0 0 16 16">
            <path
                d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
            </svg>
            <h3>灯光: <span id='status'></span></h3>
            <button id='toggleBtn'>ON/OFF</button>
            </center>
        </div>
      

        <script>
          
            function makeRequest(action, callback) {
                var req = new XMLHttpRequest();

                req.open('GET', '/' + action + '?' + Date.now());
        
                if (callback !== undefined) {
                    req.onreadystatechange = function() {
                        if (req.status === 200) callback(req.responseText);
                    };
                }
                req.send(null);
            }

            var statusSpan = document.getElementById('status');
            var lightstatus = document.getElementById('light');
            function updateStatus(status) {
                
                if (status == "HIGH") {
                    statusSpan.textContent = "关";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>'
                }
                else{
                    statusSpan.textContent = "开";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>'
                }
            }

            document.getElementById('toggleBtn').addEventListener('click',
                function() {
                makeRequest('toggle', updateStatus);
            });

            makeRequest('status', updateStatus);
        </script>
    </body>
</html>
esp8266wifi_html_ui.zip
12.8KB
arduino.ino
#include <DHT.h>
#include <DHT_U.h>

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

#define DHTPIN 12
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// Access point credentials
const char *ssid = "essid",   //连接wifi的名称
           *password = "password"; //连接wifi的密码

ESP8266WebServer server(80);

//const int LED_PIN = LED_BUILTIN;
const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {
    // Just serve the index page from SPIFFS when asked for
    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}


// A function which sends the LED status back to the client
void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}

// Toggle the LED and back its status
void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}
void sendDHT(){
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    if (isnan(t)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(t));
  }

void sendDHTH(){
    float h = dht.readHumidity();
    if (isnan(h)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(h));
  }

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();

    
    WiFi.begin(ssid,password);

    while(WiFi.status() != WL_CONNECTED){
      delay(500);
      Serial.print(".");
    }
    Serial.println("");
    Serial.println("wifi connected");   //显示wifi已连接
    Serial.println("IP address:");      //显示获取到的IP地址
    Serial.println(WiFi.localIP());
 
    // The root handler
    server.on("/", handleRoot);
    // Handlers for various user-triggered events
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
    server.on("/temper",sendDHT);
    server.on("/hum",sendDHTH);
    
    dht.begin();

    server.begin();
    
}

void loop() {
    server.handleClient();
}
web.html
<!doctype html>

<html>
    <head>
        <meta charset='UTF-8' />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"> -->
        <!-- <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" /> -->
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <title>智能家居控制平台</title>

        <style>
        body{height: 100vh;justify-content: center;align-items: center;background-color: #efeeee;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        </style>
    </head>

    <body>
        <div class="container">
            <center>
            <h2>智能家居控制平台</h2>
            <svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb"
                viewBox="0 0 16 16">
            <path
                d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
            </svg>
            <h3>灯光: <span id='status'></span></h3>
            <button id='toggleBtn'>ON/OFF</button>
            </center>
        </div>
        <div class="container">
            <center>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="96" height="96">
                    <path fill="none" d="M0 0h24v24H0z" />
                    <path
                        d="M8 5a4 4 0 1 1 8 0v5.255a7 7 0 1 1-8 0V5zm1.144 6.895a5 5 0 1 0 5.712 0L14 11.298V5a2 2 0 1 0-4 0v6.298l-.856.597zM8 16h8a4 4 0 1 1-8 0z" />
                </svg>
                <h3>温度: <span id="tempter"></span><span id="temper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path fill="none" d="M0 0h24v24H0z" />
                    <path
                        d="M4.5 10a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM22 10h-2a4 4 0 1 0-8 0v5a4 4 0 1 0 8 0h2a6 6 0 1 1-12 0v-5a6 6 0 1 1 12 0z" />
                </svg>
                </span></h3>
            </center>
        </div>
      

        <script>
            // A function for making an AJAX request. The response is given
            // to the callback as a parameter.
            function makeRequest(action, callback) {
                var req = new XMLHttpRequest();
                // Add a unique GET parameter to prevent caching
                req.open('GET', '/' + action + '?' + Date.now());
                // Attach the callback if given
                if (callback !== undefined) {
                    req.onreadystatechange = function() {
                        if (req.status === 200) callback(req.responseText);
                    };
                }
                req.send(null);
            }

            var statusSpan = document.getElementById('status');
            var lightstatus = document.getElementById('light');
            function updateStatus(status) {
                
                if (status == "HIGH") {
                    statusSpan.textContent = "关";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>'
                }
                else{
                    statusSpan.textContent = "开";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>'
                }
            }

            document.getElementById('toggleBtn').addEventListener('click',
                function() {
                makeRequest('toggle', updateStatus);
            });

            function updateTemper(status) {
                var temper = document.getElementById('tempter');
                temper.textContent = status
                }
            makeRequest('status', updateStatus);
            makeRequest('temper', updateTemper);
            var timer = self.setInterval(" makeRequest('temper', updateTemper)",5000);
            
        </script>
    </body>
</html>
然后在arduino的项目目录下创建data文件夹，然后把index.html文件放入后，用
esp8266fs工具写入到flash中，连接wifi之后就可以了。
esp8266fs工具:
Releases · esp8266/arduino-esp8266fs-plugin
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.
Releases · esp8266/arduino-esp8266fs-plugin
https://github.com/esp8266/arduino-esp8266fs-plugin/releases
Releases · esp8266/arduino-esp8266fs-plugin
添加WiFiManager后：
#include <WiFiManager.h>

#include <DHT.h>
#include <DHT_U.h>

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

#define DHTPIN 12
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// Access point credentials
//const char *ssid = "n1",
//           *password = "raspberry";

ESP8266WebServer server(80);

//const int LED_PIN = LED_BUILTIN;
const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {
    // Just serve the index page from SPIFFS when asked for
    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}


// A function which sends the LED status back to the client
void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}

// Toggle the LED and back its status
void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}
void sendDHT(){
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    if (isnan(t)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(t));
  }

void sendDHTH(){
    float h = dht.readHumidity();
    if (isnan(h)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(h));
  }

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();
    WiFiManager wm;
    wm.autoConnect("SmartSocket");


    Serial.println(""); 
    Serial.print("ESP8266 Connected to ");
    Serial.println(WiFi.SSID());              // WiFi名称
    Serial.print("IP address:\t");
    Serial.println(WiFi.localIP());  

    // The IP will be 192.168.4.1
    //WiFi.softAP(ssid, password);
//    WiFi.begin(ssid,password);
//
//    while(WiFi.status() != WL_CONNECTED){
//      delay(500);
//      Serial.print(".");
//    }
//    Serial.println("");
//    Serial.println("wifi connected");
//    Serial.println("IP address:");
//    Serial.println(WiFi.localIP());
 
    // The root handler
    server.on("/", handleRoot);
    // Handlers for various user-triggered events
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
    server.on("/temper",sendDHT);
    server.on("/hum",sendDHTH);
    
    dht.begin();

    server.begin();
    
}

void loop() {
    server.handleClient();
}
github:
GitHub - tzapu/WiFiManager: ESP8266 WiFi Connection manager with web captive portal
Espressif ESPx WiFi Connection manager with fallback web configuration portal ⚠️ This Documentation is out of date, see notes below Member to Member Support / Chat The configuration portal is of the captive variety, so on various devices it will present the configuration dialogue as soon as you connect to the created access point.
GitHub - tzapu/WiFiManager: ESP8266 WiFi Connection manager with web captive portal
https://github.com/tzapu/WiFiManager
GitHub - tzapu/WiFiManager: ESP8266 WiFi Connection manager with web captive portal
notion image
arduino esp8266 web控制和LED控制:
web.ino
#include <DHT.h>
#include <DHT_U.h>

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

#define DHTPIN 12

const char *ssid = "essid",
           *password = "password";

ESP8266WebServer server(80);


const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {

    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}



void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}


void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();


    WiFi.begin(ssid,password);

    while(WiFi.status() != WL_CONNECTED){
      delay(500);
      Serial.print(".");
    }
    Serial.println("");
    Serial.println("wifi connected");
    Serial.println("IP address:");
    Serial.println(WiFi.localIP());
 

    server.on("/", handleRoot);
  
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
 

    server.begin();
}

void loop() {
    server.handleClient();
}
index.html
<!doctype html>

<html>
    <head>
        <meta charset='UTF-8' />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"> -->
        <!-- <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" /> -->
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <title>智能家居控制平台</title>

        <style>
        body{height: 100vh;justify-content: center;align-items: center;background-color: #efeeee;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        </style>
    </head>

    <body>
        <div class="container">
            <center>
            <h2>智能家居控制平台</h2>
            <svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb"
                viewBox="0 0 16 16">
            <path
                d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
            </svg>
            <h3>灯光: <span id='status'></span></h3>
            <button id='toggleBtn'>ON/OFF</button>
            </center>
        </div>
      

        <script>
          
            function makeRequest(action, callback) {
                var req = new XMLHttpRequest();

                req.open('GET', '/' + action + '?' + Date.now());
        
                if (callback !== undefined) {
                    req.onreadystatechange = function() {
                        if (req.status === 200) callback(req.responseText);
                    };
                }
                req.send(null);
            }

            var statusSpan = document.getElementById('status');
            var lightstatus = document.getElementById('light');
            function updateStatus(status) {
                
                if (status == "HIGH") {
                    statusSpan.textContent = "关";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>'
                }
                else{
                    statusSpan.textContent = "开";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>'
                }
            }

            document.getElementById('toggleBtn').addEventListener('click',
                function() {
                makeRequest('toggle', updateStatus);
            });

            makeRequest('status', updateStatus);
        </script>
    </body>
</html>
esp8266wifi_html_ui.zip
12.8KB
arduino.ino
#include <DHT.h>
#include <DHT_U.h>

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

#define DHTPIN 12
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// Access point credentials
const char *ssid = "essid",   //连接wifi的名称
           *password = "password"; //连接wifi的密码

ESP8266WebServer server(80);

//const int LED_PIN = LED_BUILTIN;
const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {
    // Just serve the index page from SPIFFS when asked for
    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}


// A function which sends the LED status back to the client
void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}

// Toggle the LED and back its status
void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}
void sendDHT(){
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    if (isnan(t)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(t));
  }

void sendDHTH(){
    float h = dht.readHumidity();
    if (isnan(h)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(h));
  }

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();

    
    WiFi.begin(ssid,password);

    while(WiFi.status() != WL_CONNECTED){
      delay(500);
      Serial.print(".");
    }
    Serial.println("");
    Serial.println("wifi connected");   //显示wifi已连接
    Serial.println("IP address:");      //显示获取到的IP地址
    Serial.println(WiFi.localIP());
 
    // The root handler
    server.on("/", handleRoot);
    // Handlers for various user-triggered events
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
    server.on("/temper",sendDHT);
    server.on("/hum",sendDHTH);
    
    dht.begin();

    server.begin();
    
}

void loop() {
    server.handleClient();
}
web.html
<!doctype html>

<html>
    <head>
        <meta charset='UTF-8' />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"> -->
        <!-- <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" /> -->
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <title>智能家居控制平台</title>

        <style>
        body{height: 100vh;justify-content: center;align-items: center;background-color: #efeeee;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        </style>
    </head>

    <body>
        <div class="container">
            <center>
            <h2>智能家居控制平台</h2>
            <svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb"
                viewBox="0 0 16 16">
            <path
                d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
            </svg>
            <h3>灯光: <span id='status'></span></h3>
            <button id='toggleBtn'>ON/OFF</button>
            </center>
        </div>
        <div class="container">
            <center>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="96" height="96">
                    <path fill="none" d="M0 0h24v24H0z" />
                    <path
                        d="M8 5a4 4 0 1 1 8 0v5.255a7 7 0 1 1-8 0V5zm1.144 6.895a5 5 0 1 0 5.712 0L14 11.298V5a2 2 0 1 0-4 0v6.298l-.856.597zM8 16h8a4 4 0 1 1-8 0z" />
                </svg>
                <h3>温度: <span id="tempter"></span><span id="temper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path fill="none" d="M0 0h24v24H0z" />
                    <path
                        d="M4.5 10a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM22 10h-2a4 4 0 1 0-8 0v5a4 4 0 1 0 8 0h2a6 6 0 1 1-12 0v-5a6 6 0 1 1 12 0z" />
                </svg>
                </span></h3>
            </center>
        </div>
      

        <script>
            // A function for making an AJAX request. The response is given
            // to the callback as a parameter.
            function makeRequest(action, callback) {
                var req = new XMLHttpRequest();
                // Add a unique GET parameter to prevent caching
                req.open('GET', '/' + action + '?' + Date.now());
                // Attach the callback if given
                if (callback !== undefined) {
                    req.onreadystatechange = function() {
                        if (req.status === 200) callback(req.responseText);
                    };
                }
                req.send(null);
            }

            var statusSpan = document.getElementById('status');
            var lightstatus = document.getElementById('light');
            function updateStatus(status) {
                
                if (status == "HIGH") {
                    statusSpan.textContent = "关";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>'
                }
                else{
                    statusSpan.textContent = "开";
                    lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>'
                }
            }

            document.getElementById('toggleBtn').addEventListener('click',
                function() {
                makeRequest('toggle', updateStatus);
            });

            function updateTemper(status) {
                var temper = document.getElementById('tempter');
                temper.textContent = status
                }
            makeRequest('status', updateStatus);
            makeRequest('temper', updateTemper);
            var timer = self.setInterval(" makeRequest('temper', updateTemper)",5000);
            
        </script>
    </body>
</html>
然后在arduino的项目目录下创建data文件夹，然后把index.html文件放入后，用
esp8266fs工具写入到flash中，连接wifi之后就可以了。
esp8266fs工具:
Releases · esp8266/arduino-esp8266fs-plugin
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.
Releases · esp8266/arduino-esp8266fs-plugin
https://github.com/esp8266/arduino-esp8266fs-plugin/releases
Releases · esp8266/arduino-esp8266fs-plugin
添加WiFiManager后：
#include <WiFiManager.h>

#include <DHT.h>
#include <DHT_U.h>

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

#define DHTPIN 12
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// Access point credentials
//const char *ssid = "n1",
//           *password = "raspberry";

ESP8266WebServer server(80);

//const int LED_PIN = LED_BUILTIN;
const int LED_PIN = 15;
int ledStatus = HIGH;

void handleRoot() {
    // Just serve the index page from SPIFFS when asked for
    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}


// A function which sends the LED status back to the client
void sendStatus() {
    if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
    else server.send(200, "text/plain", "LOW");
}

// Toggle the LED and back its status
void toggleLED() {
    ledStatus = ledStatus == HIGH ? LOW : HIGH;
    digitalWrite(LED_PIN, ledStatus);
    sendStatus();
}
void sendDHT(){
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    if (isnan(t)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(t));
  }

void sendDHTH(){
    float h = dht.readHumidity();
    if (isnan(h)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return;
  }
    server.send(200, "text/plain", String(h));
  }

void setup() {
    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, ledStatus);
    Serial.begin(115200);

    SPIFFS.begin();
    WiFiManager wm;
    wm.autoConnect("SmartSocket");


    Serial.println(""); 
    Serial.print("ESP8266 Connected to ");
    Serial.println(WiFi.SSID());              // WiFi名称
    Serial.print("IP address:\t");
    Serial.println(WiFi.localIP());  

    // The IP will be 192.168.4.1
    //WiFi.softAP(ssid, password);
//    WiFi.begin(ssid,password);
//
//    while(WiFi.status() != WL_CONNECTED){
//      delay(500);
//      Serial.print(".");
//    }
//    Serial.println("");
//    Serial.println("wifi connected");
//    Serial.println("IP address:");
//    Serial.println(WiFi.localIP());
 
    // The root handler
    server.on("/", handleRoot);
    // Handlers for various user-triggered events
    server.on("/toggle", toggleLED);
    server.on("/status", sendStatus);
    server.on("/temper",sendDHT);
    server.on("/hum",sendDHTH);
    
    dht.begin();

    server.begin();
    
}

void loop() {
    server.handleClient();
}
github:
GitHub - tzapu/WiFiManager: ESP8266 WiFi Connection manager with web captive portal
Espressif ESPx WiFi Connection manager with fallback web configuration portal ⚠️ This Documentation is out of date, see notes below Member to Member Support / Chat The configuration portal is of the captive variety, so on various devices it will present the configuration dialogue as soon as you connect to the created access point.
GitHub - tzapu/WiFiManager: ESP8266 WiFi Connection manager with web captive portal
https://github.com/tzapu/WiFiManager
GitHub - tzapu/WiFiManager: ESP8266 WiFi Connection manager with web captive portal
Built with Potion.so