安装:
github地址:Release Add support for python 3 for Arduino-ESP8266 2.6.x · esp8266/arduino-esp8266fs-plugin · GitHub
需要注意,本人在尝试2.3.2版本的arduino IDE尝试安装这个插件,但是无法安装成功.
在b站查询相关视频发现有用 1.8版本的arduino 安装成功的,本人也成功安装
下载插件,解压到arduino1.8版本的安装地址的tools上
C:\Program Files (x86)\Arduino\tools(我是直接安装在c盘上了)
安装成功的样例
2.0使用方法
2.1找到你的代码的文件夹
2.2创建data文件
2.3创建你需要用的网页或者其他文件
2.4通过这个插件进行烧录
然后再烧录你的程序就可以配合使用
3.0这里附赠一个AP网络 且用esp8266fs的例程 里面是一个简单的登录界面
main.ino
#include <ESP8266WiFi.h>
#include <FS.h>
#include <ESP8266WebServer.h>// 设置 AP 模式的参数
const char* ap_ssid = "ESP8266_AP";
const char* ap_password = "12345678"; // 设置一个密码// 创建 Web 服务器对象,监听端口80
ESP8266WebServer server(80);void setup() {// 启动串口调试Serial.begin(115200);delay(10);// 设置 ESP8266 为 Access Point 模式WiFi.softAP(ap_ssid, ap_password);Serial.println("ESP8266 is in AP mode");Serial.print("IP Address: ");Serial.println(WiFi.softAPIP());// 初始化 SPIFFS 文件系统if (!SPIFFS.begin()) {Serial.println("SPIFFS Mount Failed");return;}// 配置 Web 服务器路由server.on("/", HTTP_GET, []() {File file = SPIFFS.open("/index.html", "r"); // 打开存储在 SPIFFS 中的网页文件if (!file) {server.send(404, "text/plain", "File Not Found");return;}server.streamFile(file, "text/html"); // 流式传输文件内容到客户端file.close();});// 你也可以添加其他路由来服务更多文件,如 CSS、JSserver.on("/style.css", HTTP_GET, []() {File file = SPIFFS.open("/style.css", "r");if (!file) {server.send(404, "text/plain", "File Not Found");return;}server.streamFile(file, "text/css");file.close();});// 启动 Web 服务器server.begin();
}void loop() {// 处理传入的 HTTP 请求server.handleClient();
}
data------index.html
|
|---style.css
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>User Login</title><link rel="stylesheet" href="/style.css">
</head>
<body><div class="login-container"><h2>Login</h2><form action="/login" method="POST" class="login-form"><div class="input-group"><label for="username">Username</label><input type="text" id="username" name="username" required placeholder="Enter your username"></div><div class="input-group"><label for="password">Password</label><input type="password" id="password" name="password" required placeholder="Enter your password"></div><button type="submit" class="submit-btn">Login</button></form></div>
</body>
</html>
style.css
/* Basic Reset */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: Arial, sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;height: 100vh;
}/* Login Container */
.login-container {background-color: white;padding: 30px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);width: 300px;text-align: center;
}/* Form Title */
.login-container h2 {margin-bottom: 20px;color: #333;
}/* Input Group */
.input-group {margin-bottom: 15px;text-align: left;
}.input-group label {display: block;font-size: 14px;color: #333;
}.input-group input {width: 100%;padding: 10px;margin-top: 5px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;
}/* Submit Button */
.submit-btn {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;
}.submit-btn:hover {background-color: #45a049;
}/* Responsive Design */
@media (max-width: 600px) {.login-container {width: 90%;padding: 20px;}
}
3.1程序现象
4.0 SPIFFS文件系统 初始化(烧录上正常是无法被删除的)
#include <FS.h>void setup() {Serial.begin(115200);delay(1000); // 等待串口初始化// 检查SPIFFS文件系统if (!SPIFFS.begin()) {Serial.println("SPIFFS 初始化失败!");return;}// 格式化 SPIFFS 文件系统Serial.println("正在格式化 SPIFFS 文件系统...");if (SPIFFS.format()) {Serial.println("SPIFFS 文件系统格式化成功!");} else {Serial.println("SPIFFS 文件系统格式化失败!");}
}void loop() {// 在此处编写其他逻辑
}