ESP32C3 使用web网页配网教程
概述
今天我来给大家介绍一下如何用 ESP32C3 创建一个网页，用来配置 WiFi 参数。通过这种方式，我们可以通过网页输入 WiFi 的 SSID 和密码，让 ESP32C3 连接到指定的 WiFi 网络。
先决条件
在开始之前，确保你已经搞定了以下几个事情：
- 安装并配置好 ESP-IDF 开发环境。
- 对 ESP-IDF 和 ESP32C3 有个基本的了解。
步骤
1. 克隆项目仓库
首先，从 GitHub 或 Gitee 上克隆项目仓库：
- GitHub 链接: https://github.com/renbingcheng/esp_web_wificfg
- Gitee 链接: https://gitee.com/renbingcheng/esp_web_wificfg
git clone https://github.com/renbingcheng/esp_web_wificfg
cd esp_web_wificfg
或者
git clone https://gitee.com/renbingcheng/esp_web_wificfg
cd esp_web_wificfg
2. 配置项目
打开 menuconfig 配置界面：
idf.py menuconfig
在这里，确保设置了正确的目标芯片（ESP32C3）和其他相关参数。
3. 项目代码讲解
主文件 main.c
这个文件包含了启动 WiFi AP 模式和配置网页服务器的代码。以下是关键代码片段的讲解：
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "freertos/event_groups.h"
#include "esp_system.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_log.h"
#include "esp_netif.h"
#include "nvs_flash.h"
#include "lwip/err.h"
#include "lwip/sys.h"
#define WIFI_SSID "your_wifi_ssid"
#define WIFI_PASS "your_wifi_password"
#define MAX_RETRY 5
static EventGroupHandle_t s_wifi_event_group;
#define WIFI_CONNECTED_BIT BIT0
#define WIFI_FAIL_BIT BIT1
static const char *TAG = "wifi_station";
static int s_retry_num = 0;
static void event_handler(void* arg, esp_event_base_t event_base, int32_t event_id, void* event_data) {
if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_START) {
esp_wifi_connect();
} else if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_DISCONNECTED) {
if (s_retry_num < MAX_RETRY) {
esp_wifi_connect();
s_retry_num++;
ESP_LOGI(TAG, "retry to connect to the AP");
} else {
xEventGroupSetBits(s_wifi_event_group, WIFI_FAIL_BIT);
}
ESP_LOGI(TAG,"connect to the AP fail");
} else if (event_base == IP_EVENT && event_id == IP_EVENT_STA_GOT_IP) {
ip_event_got_ip_t* event = (ip_event_got_ip_t*) event_data;
ESP_LOGI(TAG, "got ip:%s", ip4addr_ntoa(&event->ip_info.ip));
s_retry_num = 0;
xEventGroupSetBits(s_wifi_event_group, WIFI_CONNECTED_BIT);
}
}
void wifi_init_sta(void) {
s_wifi_event_group = xEventGroupCreate();
esp_netif_init();
esp_event_loop_create_default();
esp_netif_create_default_wifi_sta();
wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
esp_wifi_init(&cfg);
esp_event_handler_instance_t instance_any_id;
esp_event_handler_instance_t instance_got_ip;
esp_event_handler_instance_register(WIFI_EVENT, ESP_EVENT_ANY_ID, &event_handler, NULL, &instance_any_id);
esp_event_handler_instance_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &event_handler, NULL, &instance_got_ip);
wifi_config_t wifi_config = {
.sta = {
.ssid = WIFI_SSID,
.password = WIFI_PASS
},
};
esp_wifi_set_mode(WIFI_MODE_STA);
esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config);
esp_wifi_start();
EventBits_t bits = xEventGroupWaitBits(s_wifi_event_group,
WIFI_CONNECTED_BIT | WIFI_FAIL_BIT,
pdFALSE,
pdFALSE,
portMAX_DELAY);
if (bits & WIFI_CONNECTED_BIT) {
ESP_LOGI(TAG, "connected to ap SSID:%s", WIFI_SSID);
} else if (bits & WIFI_FAIL_BIT) {
ESP_LOGI(TAG, "Failed to connect to SSID:%s", WIFI_SSID);
} else {
ESP_LOGE(TAG, "UNEXPECTED EVENT");
}
esp_event_handler_instance_unregister(IP_EVENT, IP_EVENT_STA_GOT_IP, instance_got_ip);
esp_event_handler_instance_unregister(WIFI_EVENT, ESP_EVENT_ANY_ID, instance_any_id);
vEventGroupDelete(s_wifi_event_group);
}
void app_main(void) {
esp_err_t ret = nvs_flash_init();
if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {
ESP_ERROR_CHECK(nvs_flash_erase());
ret = nvs_flash_init();
}
ESP_ERROR_CHECK(ret);
wifi_init_sta();
}
关键部分讲解
- WiFi 事件处理器：处理 WiFi 连接和断开事件。
- WiFi 初始化：配置并启动 WiFi。
- 主函数：初始化 NVS（非易失性存储），然后启动 WiFi STA 模式。
4. 添加网页代码
在项目目录中创建一个新的文件 index.html，并将以下代码复制到文件中：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WiFi 密码配置</title>
<style>
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 2rem;
border: 1px solid #ccc;
border-radius: 10px;
}
label, input {
display: block;
margin-bottom: 1rem;
}
@media (max-width: 600px) {
.form-container {
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="form_container">
<h3>WiFi 密码配置</h3>
<form>
<label for="wifi_ssid">WiFi 名称</label>
<input type="text" id="wifi_ssid" name="wifi_ssid" placeholder="ssid">
<label for="wifi_password">密码</label>
<input type="password" id="wifi_password" name="wifi_password" placeholder="password">
<button id="send_wifi" type="button" onclick="send_wifi_data()">提交</button>
<button id="clear_input" type="button" onclick="clear_button()">清除</button>
</form>
</div>
<script>
function send_wifi_data() {
var wifi_ssid = document.getElementById("wifi_ssid").value;
var wifi_password = document.getElementById("wifi_password").value;
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/wifi_data", true);
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
console.log(xhttp.responseText);
alert(xhttp.responseText);
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
}
}
};
var data = {
"wifi_ssid": wifi_ssid,
"wifi_passwd": wifi_password
}
xhttp.send(JSON.stringify(data));
}
function clear_button() {
document.getElementById("wifi_ssid").value = '';
document.getElementById("wifi_password").value = '';
}
</script>
</body>
</html>
5. 构建并烧录代码
使用以下命令构建并烧录代码到 ESP32C3：
idf.py build
idf.py flash
6. 监控输出
使用 idf.py monitor 监控 ESP32C3 的输出，确保设备成功连接到 WiFi 网络。
idf.py monitor
结论
通过以上步骤，你已经成功地在 ESP32C3 上设置了一个用于配置 WiFi 参数的网页服务器。这种方法不仅方便，而且可以让你的 IoT 设备在不同的网络环境下更容易连接。
希望这个教程对你有所帮助！如果有任何问题或建议，欢迎在下方留言讨论。
扫一扫
2237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
