在使用ESP32开发微控制器进行无线网络项目时，创建一个Web服务器并实现Captive Portal功能可以为用户提供极大的便利。本文将介绍如何在VSCode中结合ESP-IDF框架搭建一个简单的Web服务器，并且实现Wi-Fi账号密码的自动弹出认证页面。
一、环境准备
首先，需要确保已安装以下软件：
- VSCode：推荐使用最新版。
- ESP-IDF：请按照ESP-IDF的官方文档进行安装和配置，确保能够通过VSCode使用ESP-IDF进行开发。
二、项目创建
打开VSCode，使用ESP-IDF的命令行工具创建新项目：
idf.py create-project captive_portal
cd captive_portal
三、代码实现
接下来，我们需要编写代码来实现Web服务器和Captive Portal功能。以下是主要的代码示例：
1. 引入所需的库
在main/captive_portal_main.c文件中引入必要的头文件。
#include <stdio.h>
#include <string.h>
#include <stdint.h>
#include "esp_system.h"
#include "esp_log.h"
#include "esp_wifi.h"
#include "nvs_flash.h"
#include "esp_event.h"
#include "protocol_examples_common.h"
#include "esp_http_server.h"
2. 设置Wi-Fi接入点与事件处理
定义WiFi配置并初始化事件处理程序。
#define EXAMPLE_SSID "ESP32-Access-Point"
#define EXAMPLE_PASS "password"
static void wifi_init_softap() {
esp_wifi_set_mode(WIFI_MODE_AP);
wifi_config_t wifi_config = {
.ap = {
.ssid = EXAMPLE_SSID,
.ssid_len = strlen(EXAMPLE_SSID),
.max_connection = 4,
.authmode = WIFI_AUTH_WPA_WPA2_PSK,
},
};
if (strlen(EXAMPLE_PASS) > 0) {
strlcpy((char*)wifi_config.ap.password, EXAMPLE_PASS, sizeof(wifi_config.ap.password));
wifi_config.ap.authmode = WIFI_AUTH_WPA2_PSK; // WPA2加密
} else {
wifi_config.ap.authmode = WIFI_AUTH_OPEN; // 开放网络
}
ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_AP, &wifi_config));
}
3. 创建HTTP服务器
构建HTTP服务器，处理客户端请求，提供Captive Portal页面。
esp_err_t root_get_handler(httpd_req_t *req) {
const char* resp_str = "<html><body><h1>Wi-Fi Configuration</h1>"
"<form action=\"/save\" method=\"POST\">"
"<input name=\"ssid\" placeholder=\"SSID\"/><br/>"
"<input name=\"password\" type=\"password\" placeholder=\"Password\"/><br/>"
"<input type=\"submit\" value=\"Connect\"/>"
"</form></body></html>";
httpd_resp_send(req, resp_str, strlen(resp_str));
return ESP_OK;
}
esp_err_t save_post_handler(httpd_req_t *req) {
// 处理Wi-Fi配置逻辑
// 此处需要解析请求体中的SSID和密码，并进行连接
// 略去实现细节
httpd_resp_send(req, "Wi-Fi Configuration Saved", HTTPD_RESP_USE_STRLEN);
return ESP_OK;
}
4. 启动HTTP服务器
现在，创建并启动HTTP服务器。
httpd_handle_t start_webserver(void) {
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
httpd_uri_t uri_get = {
.uri = "/",
.method = HTTP_GET,
.handler = root_get_handler,
.user_ctx = NULL
};
httpd_uri_t uri_post = {
.uri = "/save",
.method = HTTP_POST,
.handler = save_post_handler,
.user_ctx = NULL
};
httpd_start(&config);
httpd_register_uri_handler(handle, &uri_get);
httpd_register_uri_handler(handle, &uri_post);
return handle;
}
5. 整合流程
最后，整合以上步骤，并在app_main中初始化。
void app_main(void) {
esp_err_t ret = nvs_flash_init();
ESP_ERROR_CHECK(ret);
// 初始化Wi-Fi
wifi_init_softap();
// 启动HTTP服务器
start_webserver();
}
四、编译与上传
在项目目录下执行编译与上传命令：
idf.py build
idf.py flash
idf.py monitor
结语
搭建一个支持Captive Portal的Web服务器，使得用户能够方便地通过网页输入Wi-Fi账号与密码，实现设备的快速联网。以上代码为基本示例，实际应用中可能需要添加错误处理、Wi-Fi连接状态反馈等功能。希望此文能给您提供帮助，祝您在开发ESP32项目的过程中取得更好的成果！
