ESP32 基于 IDF v5.3.1 实现一键 WEB 配网

虽然乐鑫官方提供了 EspTouch 软件来实现一键配置 ESP32 去连接目标 AP 实现联网，但是终究还是没有使用 WEB 网页后台实现一键配置 WIFI 联网来的方便高效，且跨平台。

ESP32 在未连接 WiFi 时自动开启热点 AP → 用户浏览器访问 ESP32 页面 → 用户输入 SSID/密码 → ESP32 自动连接用户 WEB 设置的目标 WiFi → 连接成功保存配置到 NVS → 下次启动先检查和读取 NVS 里面的 WIFI 配置，无需配网。

此部分已在其他文档详细实现，请参考相关 ESP32 AP 模式教程。

HTTP Request Header 和 HTTP URI 长度根据需要更改，以保证 HTTP 的报头发出不报错。建议根据实际需求调整。

还有就是在工程的 CmakeList 里面我们还需要添加 mdns 和 mbedtls 2 个依赖，以确保后续使用 http 创建服务端时不会出现问题：

网页文件的内容本质上是很长的字符串，那最简单的方法就是定义一个字符串数组，将数组内容填充为网页内容。例如：

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 网页文件：例如我的命名为 wifi.html。

我的 wifi.html 文件：

<!DOCTYPE html> <html lang='en'> <head>   ESP32 WEB CONFIG STA

更多推荐文章