用esp8266做web网页管理（esp32移植功能不完整）arduino

firseve · 发表于 2021-7-13 19:04:13

测过8266 8脚的1s，NodeMCU开发板，这2个有代表性的板子没问题，其他的应该都可以通用这玩意2年多前做的，后来懒，就一直没再折腾，有需要的拿去改造吧

esp8266信息比较完整，esp32只是做了个兼容，没有再更新
登录用户名密码的功能随便看下arduino的demo，或者百度，自己添加到ino中就行了

gitee
https://gitee.com/happysoul/esp8266web
https://gitee.com/happysoul/esp32web
github
https://github.com/happysoul/esp8266web
https://github.com/happysoul/esp32web

补充说明下：关于spiffs中的 /u/ 目录，因为设计为上传下载目录，所以这个目录下的文件被设置为文件流通过http返回头信息给浏览器。

后面内容从git粘贴过来的，剩下的靠你去折腾了，还是前面说的，2年前的代码了，arduino编辑器和8266的库都更新好几个版本了，截图和描述参考着自己修改吧

使用 ESP8266开发板，基于Arduino开发

我使用的 NodeMCU 1.0
flash size:4M (FS:3MB OTA:~512KB)

文件结构

data文件夹，使用工具上传到spiffs空间中。库文件使用gz进行压缩，减少http访问时间，网页显示内容都在index.html中，u文件夹为用户上传下载目录
png系统运行截图，用于展示部署后可以看到的web界面
esp8266web.ino arduino程序文件

功能：

1、通电后根据保存的多组wifi密码尝试连接，尝试失败后再尝试内置密码连接，如果依旧无法连接wifi则开启AP（名字：8266，密码：happysoul，192.168.4.1）
2、网页功能：基础测试功能、wifi密码配置、spiffs文件（/u/目录下）
开关板载LED，读写JSON文件扫描wifi，暂未实现点击连wifi的功能
重启8266的按钮
显示spiffs信息，显示文件列表，删除文件文件上传，下载到spiffs
3、OTA升级：默认打开了OTA升级功能，也就是说程序烧到板子以后默认打开了网络升级功能，不需要串口了，随便找个5V或者3.3V的供电就可以了。
只需要电脑和8266在同一个网络下，重启arduino IDE 在选择com口的位置就能看到8266的ip可以选择。

TODO 计划增加功能

1、完善扫描wifi后保存连接的功能

依赖：

1、ESP8266开发板支持
工具 - 开发板 - 开发板管理器搜索esp8266并安装，如果没有这个选择先配网址
文件 - 首选项，开发版管理网址输入：https://arduino.esp8266.com/stable/package_esp8266com_index.json 确定后在上一步位置再搜索esp8266
安装大约需要下载100M-200M的文件
2、ArduinoJSON（项目-加载库-搜索ArduinoJSON并安装）
3、ESP8266FS / 下载文件
解压缩文件 arduino-1.8.9\tools\ESP8266FS\tool\esp8266fs.jar
重启arduino，工具菜单下就能看到ESP8266 Sketch Data Upload功能

使用步骤

1、确保依赖已经安装
2、选择开发板及flash size
某宝买的带有mini usb接口的一般就选择 NodeMCU 1.0，flash size:4M (FS:3MB OTA:~512KB) 也就是板载32Mbit，分出来24Mbit空间给spiffs使用,其中部分空间预留给OTA升级使用
如果你是 ESP8266 8针脚的，那么你板载flash就是 8Mbit 也就是使用的时候需要选择 1M(FS:512KB OTA:~246KB)
3、编译上传
4、工具 - ESP8266 Sketch Data Upload
这个步骤做的是将 data 文件夹下的文件复制到 esp8266 的spiffs空间中
如果只修改了 data 文件夹中的内容不需要上传 ino 程序，只需要上传文件即可
同理，如果只修改了 ino 文件，则不需要重复上传 data 的文件

ide配置和预览图片在png目录下

wifi管理，可以配置多个ssid及密码，8266通电后，会循环尝试连接你保存的配置，对应文件是 config.ini存在spiffs中

文件管理功能：上传、下载、删除文件

添加新按钮及后台代码方法

1、修改网页。修改 data/index.html。搜索 userButton1 可以看到2部分代码，html和js，分别对应页面显示和点击按钮事件
2、修改ino文件。需要注册url的响应代码：server.on("/userButton1", userButton1);然后在 void userButton1(){}中写入你的响应事件

同理如果需要加按钮可以复制上面样例代码可以扩展多个按钮