ESP32 更新网页

转载

技术博客领航者 2025-01-07 06:55:56

文章标签 ESP32 更新网页 json 文件系统 #include 文章分类 架构后端开发

简单ESP8266Web配网，利用闪存文件系统记录配网信息和相关参数设置

简单的ESP8266Web配网，利用闪存文件系统记录配网信息。

主要功能是通过WEB配置相关的信息，除了配置wifi外还可以配置其他相关参数信息提供了便捷方法，与利用eeprom保存原理上都是相同的，避免相关信息写死在程序里面，方便程序后期维护，相关参数可以通过配网页面给定。
存储配置参数的核心代码，就是利用json返回的数据保存下来，下次重启，先访问config.json，是否有参数，没有就进入配网页面。

String payload; // 拼接构造一段字符串形式的json数据长{"ssid":"xxxxx","password":"xxxxxxxxxxx"}
  payload += "{\"ssid\":\"";
  payload += ssid;
  payload += "\",\"password\":\"";
  payload += password;
  payload += "\",\"location0\":\"";
  payload += location0;
  payload += "\",\"apikey0\":\"";
  payload += apikey0;
  payload += "\"}";
  File wifiConfig = SPIFFS.open("/config.json", "w");
  wifiConfig.println(payload);//将数据写入config.json文件中

注意事项：利用闪存文件系统配置，上传完程序后，再点击工具-esp8266 Sketch Date Upload上传配置后，才可以打开相关的Web配置页面，进行配置,优点是：除了可以配置wifi信息，还可以配置其他参数信息进去，便于程序后期维护。
本实例所运用到的库：

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h> //闪存文件系统
#include <ArduinoJson.h>//json数据处理库（第三方）

主程序：

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h> //闪存文件系统
#include <ArduinoJson.h>//json数据处理库（第三方）

ESP8266WebServer server(80); //创建Web服务端口为80
void setup() { 
  
pinMode(LED_BUILTIN, INPUT_PULLUP);//板子上的FLASH按键，
 Serial.begin(115200);
 Serial.println("");
if (SPIFFS.begin()) { 
   // 打开闪存文件系统，记得在你连接板子下载的过程中选Flash Size的时候不要选no SPIFFS,你可以选1M、2M、3M都无所谓，因为两个文件都很小
 Serial.println(“闪存文件系统打开成功”);
} else { 
  
 Serial.println(“闪存文件系统打开失败”);
}
if (SPIFFS.exists("/config.json")) { 
   // 判断有没有config.json这个文件
 Serial.println(“存在配置信息，正在自动连接”);
const size_t capacity = JSON_OBJECT_SIZE(1) + JSON_OBJECT_SIZE(2) + 60; //分配一个内存空间
 DynamicJsonDocument doc(capacity);// 声明json处理对象
 File configJson = SPIFFS.open("/config.json", “r”);
deserializeJson(doc, configJson); // json数据序列化
const char ssid = doc[“ssid”];
const char password = doc[“password”];
const char laction0 = doc[“laction”];
const char apikey0 = doc[“apikey”];
 WiFi.mode(WIFI_STA); // 更换wifi模式
// WiFi.mode(WIFI_AP_STA);//设置模式为AP+STA
digitalWrite(LED_BUILTIN, LOW);

WiFi<span >.</span><span >begin</span><span >(</span>ssid<span >,</span> password<span >)</span><span >;</span> <span >// 连接wifi</span>
Serial<span >.</span><span >println</span><span >(</span><span >"AP设置完成"</span><span >)</span><span >;</span>
<span >while</span> <span >(</span>WiFi<span >.</span><span >status</span><span >(</span><span >)</span> <span >!=</span> WL_CONNECTED<span >)</span> <span >{<!-- --></span>
  <span >delay</span><span >(</span><span >500</span><span >)</span><span >;</span>
  Serial<span >.</span><span >print</span><span >(</span><span >"."</span><span >)</span><span >;</span>
<span >}</span>
configJson<span >.</span><span >close</span><span >(</span><span >)</span><span >;</span>
Serial<span >.</span><span >println</span><span >(</span>WiFi<span >.</span><span >localIP</span><span >(</span><span >)</span><span >)</span><span >;</span>

} else { 
  
 Serial.println(“不存在配置信息，正在打开web配网模式”);
 IPAddress softLocal(192,168,1,1);
 IPAddress softGateway(192,168,1,1);
 IPAddress softSubnet(255,255,255,0);
 WiFi.softAPConfig(softLocal, softGateway, softSubnet);
 WiFi.softAP(“esp8266”, “12345678”); //这里是配网模式下热点的名字和密码
 Serial.println(WiFi.softAPIP());
}
 server.on("/", handleRoot);//web首页监听
 server.on("/set", handleConnect); // 配置ssid密码监听，感觉跟express的路由好像
 server.begin();
}void loop() { 
  
 server.handleClient();
// if (digitalRead(LED_BUILTIN) == 0) { //按键扫描
// removeConfig();
//}
}void handleRoot() { 
   //展示网页的关键代码
if (SPIFFS.exists("/index.html")) { 
  
 File index = SPIFFS.open("/index.html", “r”);
 server.streamFile(index, “text/html”);
 index.close();
}
}void handleConnect() { 
   //处理配置信息的函数
 String ssid = server.arg(“ssid”); //arg是获取请求参数，视频中最后面展示了请求的完整链接
 String password = server.arg(“password”);
 String laction0 = server.arg(“location”); //从JavaScript发送的数据中找laction的值
 String apikey0 = server.arg(“apikey”); //从JavaScript发送的数据中找apikey的值
 Serial.println(ssid);
 Serial.println(password);
 Serial.println(laction0);
 Serial.println(apikey0);
 server.send(300, “text/plain”, “OK”);
 WiFi.mode(WIFI_STA); //改变wifi模式
 WiFi.begin(ssid.c_str(), password.c_str());//String类型直接用会报错，不要问为什么，转成char *就行了。
while (WiFi.status() != WL_CONNECTED) { 
  
delay(500);
 Serial.print(".");
}
 Serial.println(WiFi.localIP());
removeConfig(); // 不管有没有配置先删除一次再说。
 String payload; // 拼接构造一段字符串形式的json数据长{“ssid”:“xxxxx”,“password”:“xxxxxxxxxxx”}
 payload += “{“ssid”:”";
 payload += ssid;
 payload += “”,“password”:"";
 payload += password;
 payload += “”,“location0”:"";
 payload += location0;
 payload += “”,“apikey0”:"";
 payload += apikey0;
 payload += “”}";
 File wifiConfig = SPIFFS.open("/config.json", “w”);
 wifiConfig.println(payload);//将数据写入config.json文件中
 wifiConfig.close();
}void removeConfig() { 
  
if (SPIFFS.exists("/config.json")) { 
   // 判断有没有config.json这个文件
if (SPIFFS.remove("/config.json")) { 
  
 Serial.println(“删除旧配置”);
} else { 
  
 Serial.println(“删除旧配置失败”);
}
}
}

</style>
</html>