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

问题描述

我希望使用 Wemos D1 Mini Lite 创建一个独立的网络服务器（这是我拥有的唯一 wifi 微控制器，但买不起不同的 atm）。

我知道 SPIFFS 可以与 ESP32 芯片一起使用，但我可以将它与 ESP8285 芯片一起使用吗？

希望有用于网络服务器的 HTML 和 CSS，以及用于运行功能的 JS 脚本（目前唯一的功能是关闭和打开 LED），所有这些都上传到 Wemos 并从中运行。

代码

<!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;
}

标签： javascripthtmlarduinowebserver

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

问题描述

解决方案

推荐阅读