合宙的ESP32-C3开发板应该是全网最低价格的esp32开发板了吧,9.9包邮真是良心价,用来Arduino开发都是可以的。这篇文章主要讲明从零开始怎么把SPIFFS用起来,开发环境基于Windows。

安装ESP32-C3的开发环境

这个参照https://www.arduino.cn/thread-81194-1-1.html 这个帖子就行,其他方法都因为网络问题可能进行不下去。合宙这块板子为了增加可用io,牺牲了下载速度,利用2线SPI的方式操作flash。用Arduino开发时,需要把开发板设置中的FLASH MODE设置为DIO模式才能正常下载程序。其他与其他开发板基本没什么区别。

向SPIFFS存储上传文件

可以编写代码向SPIFFS存储写入文件,但是在有些场景没必要,也很麻烦。arduino上有插件可以干这个事,ESP32 Sketch Data UploadESP8266 Sketch Data Upload,这两个一个对应esp32,一个对应esp8266,虽然很方便,但是都不支持esp32-c3。这里介绍两个工具可以达成这一目的。一个是spiffsgen.py用来将上传的文件打包。一个是esptool,用来将打包的文件上传至esp32-c3。

安装spiffsgen.py

下载:https://github.com/espressif/esp-idf/blob/v4.4/components/spiffs/spiffsgen.py 一个文件,电脑有python环境就可以使用。

安装esptool

命令行执行以下命令:

python -m pip install --upgrade pip
pip install esptool
pip install pyserial

上传文件

将要上传的文件存在data文件夹下,与spiffsgen.py放一起,命令行执行以下命令:

python spiffsgen.py 0x170000 data aaa.bin
esptool.py --chip esp32c3 --port COM3 --baud 115200 write_flash -z 0x290000 aaa.bin

aaa.bin是生成的文件,0x170000是生成文件大小,要与SPIFFS空间大小一致,0x290000是地址偏移量,与分区情况相关。这个可以在SDK中找到分区文件,我的是在C:UsersyournameAppDataLocalArduino15packagesesp32hardwareesp322.0.2toolspartitions ,里面有CSV文件,就是各种分区方案,找到与您设置项Partition Scheme对应的分区文件,打开里面可以找到SPIFFS大小和地址偏移。上传好了以后就可以在程序里使用了。我上传了两个文件index.html、style.css。

开始在程序里面调用上传的文件

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <SPIFFS.h>

const char* ssid = "myAP";
const char* password = "123456789";

WebServer server(80);

const int led = 13;

void handleRouter() {
  digitalWrite(led, 1);
  String path = server.uri(); 
  if(path=="/"){
    path="/index.html";
  }
  if (SPIFFS.exists(path)){
    File file=SPIFFS.open(path,"r");
    String contentType="text/html";
    if(path.substring(path.lastIndexOf('.'))==".css"){
      contentType="text/css";
    }
    server.streamFile(file,contentType);
    file.close();
  }
  else{
    server.send(404, "text/plain", "File Not Found!\n\n");
  }
  digitalWrite(led, 0);
}

void setup(void) {
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.softAP(ssid, password);
  Serial.println("");
  Serial.print("AP IP address:");
  Serial.println(WiFi.softAPIP());
  SPIFFS.begin(); 
  server.on("/",handleRouter);
  server.onNotFound(handleRouter);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
  delay(2);
}

esp32-c3将生成一个热点myap,设备连接这个热点,浏览器打开设备IP,就可以打开index.html页面了。