我可以为 Wemos D1 Mini Lite(ESP8285 芯片)安装 SPIFFS 以使用 JS、HTML 和 CSS 文件作为独立的网络服务器吗

Can I install SPIFFS for Wemos D1 Mini Lite (ESP8285 chip) to use JS, HTML and CSS files as a stand alone webserver

我希望使用 Wemos D1 Mini Lite 创建一个独立的网络服务器(这是我唯一拥有的 wifi 微控制器,而且买不起另一个 atm)。

我知道 SPIFFS 适用于 ESP32 芯片,但我可以将它用于 ESP8285 芯片吗?

希望为网络服务器提供 HTML 和 CSS,使用 JS 脚本实现 运行 功能(目前只有功能是关闭和打开 LED),全部上传到Wemos 和 运行 来自那个。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./skeleton.css">
    <link rel="stylesheet" href="./theme.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class = "mainDiv border" > 
        <div class = "headingDiv border">
            <h3 id = "Header"> LED ON AND OFF </h3> 
        </div>
        <div class = "checkmarkDiv border">
            <div class = "row">
                <label for ="colour_red">RED LED</label>
                <input type = "checkbox" id = "colour_red">
            </div>
            <div class = "row">
                <label for ="colour_yellow">YELLOW LED</label>
                <input type = "checkbox" id = "colour_yellow">
            </div>
            <div class = "row">
                <label for ="colour_green">GREEN LED</label>
                <input type = "checkbox" id = "colour_green">
            </div>
        </div>
        <div class = "buttonDiv border">
            <button class = "button-primary" id = "button_ToggleLED"> Turn LED: ON </button>
        </div> 
    </div>
</body>
<script src = "./mainJS.js"></script>
</html>

JS代码

const button_LED = document.getElementById(  "button_ToggleLED" )
const cb_red = document.getElementById ( "colour_red" )
const cb_yellow = document.getElementById( "colour_yellow" )
const cb_green = document.getElementById( "colour_green" )

let clickCheck = false

button_LED.addEventListener( "click", (event) => {
    //consoleLEDStatus()
    if (clickCheck) {
        button_LED.innerHTML = "Turn LED: ON"
        turnOFFLED()
    }   
    else if (!clickCheck) {
        button_LED.innerHTML = "Turn LED: OFF"
        turnONLED()
    }
    clickCheck = !clickCheck
})

//  A quick function you can run to check in dev console the status of LED
function consoleLEDStatus() {
    console.log(`LED Status:
       RED:        ${cb_red.checked}
       YELLOW:     ${cb_yellow.checked}
       GREEN:      ${cb_green.checked}`)
}

function turnOFFLED() {
    //  Insert function to turn off LED
}

function turnONLED() {
    //  Insert function to turn on LED
}

CSS 代码

/* Test class for checking Div borders. Uncomment to see them*/
/*
.border{
    border: black 2px solid;
}
*/

.mainDiv{
    margin-left: 20%;
    margin-right: 20%;
    padding: 10px;
}

.checkmarkDiv{
    padding: 10px;
}

.buttonDiv{
    padding: 10px;
}

.headingDiv{
    padding: 10px;
}

#Header{

}

#button_ToggleLED{
    width: 200px;
    float: center;
}

SPIFFS 已被 LittleFS(小文件系统)取代,它可以在 EPS8266 上运行,有关详细信息,请参阅 LittleFS

可以在FSBrowser示例中找到使用LittleFS 为网页提供服务的代码示例。这是一个非常全面的示例,您可能只需要实现其中的一部分。