在前面使用Web服务的小节中,HTML字符串占用了宝贵的FLASH存储空间,若Web服务还包括图片、CSS、JS等大量文件,那么最好是用SD卡存储来实现,本小节就是一个Web服务结合SD卡文件系统的例子。
从 https://gitee.com/billyzh/esp32-cpp-lesson 下载本教程的源码到本地硬盘文件夹,如d:\esp32-cpp-lesson
在VSCode中,选择【文件】->【打开文件夹...】选择上一步保存的文件夹打开
打开项目后,选择config.h文件,修改第10行为
#define APP_LESSON92 1
打开unit9-lesson92/app_config.h文件,设置应用的相关配置
#define CONFIG_USE_WIFI 1 //启用WiFi #define CONFIG_USE_FS 1 //启用文件系统模块
#define CONFIG_USE_DISPLAY 1 //启用显示模块
#define CONFIG_USE_TFT_ESPI 1 //使用TFT_eSPI显示驱动
板级配置同前一小节
MyBoard修改为继承WiFiBoard类,代码见(unit9-lesson2/my_board.h)
创建FileSystem实例,同前一小节,代码见(unit9-lesson2/my_board.cpp)
WiFi网络启用代码(unit9-lesson92/my_application.cpp)
void MyApplication::OnInit() {
WifiBoard *board = (WifiBoard*)(&Board::GetInstance());
Display *display = board->GetDisplay();
display->Rotate(1);
//一、使用热点
char *ssid = "esp32_ap";
bool success = board->StartAP(ssid, ap_ip, ap_gateway, ap_subnet);
std::string message = "AP:" + std::string(ssid) + ", IP:" + std::string(ap_ip.toString().c_str());
// //二、连接已有WiFi网络
// bool success = board->StartNetwork("ssid", "password", 10000);
// std::string message = "IP:" + board->GetIpAddress();
if (success) {
Log::Info(TAG, message.c_str());
display->GetWindow()->SetText(1, message);
StartWebServer();
} else {
Log::Warn(TAG, "连接失败。");
display->GetWindow()->SetText(1, "连接失败。");
}
}
在应用类的OnInit方法中,先获得Board的实例并转换为WifiBoard类型,然后调用StartAP方法启动热点,参数1是热点名称,参数2,3,4分别是IP地址,网关和子网掩码;
若热点创建成功,在TFT-LCD显示屏上显示IP地址,否则显示“热点创建失败”
Web服务启动代码(unit9-lesson92/my_application.cpp)
void MyApplication::StartWebServer() {
webserver_ = new WebServer(80);
webserver_->onNotFound([this]() { HandleDefault(); });
webserver_->begin();
webtask_ = new FrtTask("WebServer");
webtask_->OnLoop([this](){
webserver_->handleClient();
delay(1);
});
webtask_->Start(8192, tskIDLE_PRIORITY+1);
}
程序解读
1.首先创建WebServer实例,使用80端口;
2.设置onNotFound的响应程序,当请求路径匹配不到on函数定义的路径时,会调用这个程序,在这里就是所有请求路径都用这个响应程序来处理。
3.调用实例webserver_的begin方法启动Web服务;
4.创建一个任务并使用handleClient方法监听Web请求,这是必须的,否则将无法响应。
文件输出代码(unit9-lesson92/my_application.cpp)
void MyApplication::HandleDefault() {
Display *display = Board::GetInstance().GetDisplay();
FileSystem *fsys = Board::GetInstance().GetFileSystem();
if (fsys == nullptr) {
webserver_->send(500, "text/plain", "文件系统求初始化。");
display->GetWindow()->SetText(2, "FileSystem init failed.");
return;
}
String path = "/html" + webserver_->uri();
if (fsys->ExistsFile(path.c_str())) {
OutputFile(path);
display->GetWindow()->SetText(3, "输出文件:" + std::string(path.c_str()));
return;
}
webserver_->send(404, "text/plain", "File not found.");
Log::Warn(TAG, "%s not found", path.c_str());
}
void MyApplication::OutputFile(String path) {
String dataType = "text/plain";
if (path.endsWith("/")) {
path += "index.html";
}
if (path.endsWith(".htm") || path.endsWith(".html")) {
dataType = "text/html";
} else if (path.endsWith(".css")) {
dataType = "text/css";
} else if (path.endsWith(".js")) {
dataType = "application/javascript";
} else if (path.endsWith(".png")) {
dataType = "image/png";
} else if (path.endsWith(".gif")) {
dataType = "image/gif";
} else if (path.endsWith(".jpg")) {
dataType = "image/jpeg";
}
FileSystem *fsys = Board::GetInstance().GetFileSystem();
File f = fsys->OpenFile(path.c_str());
webserver_->streamFile(f, dataType); // 输出文件内容
f.close();
}
程序解读
1.先通过WebServer实例的uri方法取得文件名;
2.然后通过FileSystem实例读取文件;
3.最后通过WebServer实例的streamFile方法发给文件内容给请求者;
复制unit9-lesson92/html/内的文件到SD卡的html文件夹内。
编译项目并上传开发板检验

用手机连接热点并访问192.168.5.1

MQTT协议是一个应用层协议,他要求使用的传输层协议能提供有序的,可靠的双向字节流传输服务。
MimiClaw 是一款基于 ESP32-S3 芯片的超轻量级AI助手,适合嵌入式AI与物联网开发者快速部署本地化AI代理。本系列教程基于MimiClaw的Arduino移植版本进行讲解,小节主要讲解部署和测试。
就像我们用手机打开WiFi功能后可以浏览附近的可用WiFi。要将手机连接到热点,通常需要打开Wi-Fi设置应用程序,列出可用的网络,然后选择所需的热点。然后输入密码(或不输入密码),可以使用ESP32进行相同的操作。
本文本介绍配置飞书机器人为MimiClaw的一个输入/输出端,和添加一个控制WS2812与LED的控制技能。
一块 30 块钱的开发板 + 一个大模型 API,就能做出可以听懂人话的智能硬件。 本文记录完整安装过程和踩坑经验,确保你跟着做就能跑通。
本文将从手绘架构图入手,逐层拆解 MimiClaw 的分层设计、核心模块、数据流转与底层实现,带你解剖这只“智能虾”的技术骨架,看懂在 C 语言加持下,AI 智能体如何以可穿戴设备的形态,在你身边稳稳运行、离线服务、主动响应。
本文介绍如何在不脱离 ArduinoIDE 可视化开发的前提下,通过一个名为 platform.local.txt 的小文件,实现对 ESP32 编译流程的精准控制。
本文将系统分析程序体积增长的五大根源,并提供经过验证的优化方案,帮助减小固件大小。
本文所DIY的语音助手设备端使用的是MicroPython、服务端是Python,对于很多开发者来说MicroPython入门没难度。
本小节使用音频开发框架实现一个音频录制到文件的示例。
I2S协议通过BCLK、LRCLK和DATA三线精准传输音频数据,但时序边沿、帧格式、时钟源等细节常引发噪声或断连。本文详解ESP32的I2S实现,从协议原理到ESP-IDF v5.x代码配置,助你避开常见陷阱,确保音频稳定传输。