ESP32在IDF v5.3.1版本下实现一键WEB配置WIFI联网

一、背景
虽然乐鑫官方提供了EspTouch软件来实现一键配置ESP32去连接目标AP实现联网,但是终究还是没有使用WEB网页后台实现一键配置WIFI联网来的方便高效,且跨平台。
二、实现思路
ESP32在未连接 WiFi 时自动开启热点 AP →用户浏览器访问 ESP32 页面 →用户 输入 SSID/密码 → ESP32自动连接用户WEB设置的目标WiFi → 连接成功保存配置到NVS → 下次启动先检查和读取NVS里面的WIFI配置,无需配网。
三、实现流程
1.ESP32实现开启AP热点模式
这个部分我已经在其他博客已经详细实现,请移步查看:
2.ESP32搭建Web Server实现WEB配网
(1)开启esp32的menuconfig里面的http相关配置

HTTP Request Header 和 HTTP URI 长度根据需要更改,以保证HTTP的报头发出不报错。目前我项目设置1024足够。
还有就是在工程的CmakeList里面我们还需要添加 mdns和mbedtls 2个依赖,以确保后面使用http创建服务端的时候不会出现问题:

(2)WEB网页的实现和调用
网页文件的内容本质上是很长的字符串,那最简单的方法就是定义一个字符串数组,将数组内容填充为网页内容。例如:
const char index_string[] = "<!DOCTYPE html> \ <head> \ <meta charset=\"utf-8\"> \ <title>wifi config</title> \ </head>";显然对于复杂一点的网页,这种方式显然就不太方便。要是能直接将用html工具设计生成的.htm格式的文件直接编译那不是更好了。这就是另外一种比较推荐的方式:使用 embed_files 将网页嵌入固件。
ESP-IDF 的 embed_files会在构建时把指定文件原样打包到固件中,生成 C 字节数组,并提供符号(链接符号)让 C 程序直接访问。
第一步:编写WEB网页的html文件
我们需要新建一个WEB网页的html文件,用于编写存放我们WEB网页的html网页文件:例如我的命名为wifi.html。

备注:至于网页怎么写,我也不怎么会,我也是GPT的。
我的 wifi.html 文件:
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>ESP32 WEB CONFIG STA</title> <style type="text/css"> * { margin: 0; padding: 0; } html { height: 100%; } h2 {text-align: center;color: #fff;line-height: 2.2;} body { height: 100%; background-color: #1F6F4A; 50% 50% no-repeat; background-size: cover;} .dowebok { position: absolute; left: 50%; top: 30%; width: 380px; height: 500px; margin: -200px