ESP32C3使用WEB网页配网教程

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"#defineWIFI_SSID"your_wifi_ssid"#defineWIFI_PASS"your_wifi_password"#defineMAX_RETRY5static EventGroupHandle_t s_wifi_event_group;#defineWIFI_CONNECTED_BITBIT0#defineWIFI_FAIL_BITBIT1staticconstchar*TAG ="wifi_station";staticint s_retry_num =0;staticvoidevent_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();}elseif(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");}elseif(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);}}voidwifi_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);}elseif(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);}voidapp_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

，并将以下代码复制到文件中：

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="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><divclass="form_container"><h3>WiFi 密码配置</h3><form><labelfor="wifi_ssid">WiFi 名称</label><inputtype="text"id="wifi_ssid"name="wifi_ssid"placeholder="ssid"><labelfor="wifi_password">密码</label><inputtype="password"id="wifi_password"name="wifi_password"placeholder="password"><buttonid="send_wifi"type="button"onclick="send_wifi_data()">提交</button><buttonid="clear_input"type="button"onclick="clear_button()">清除</button></form></div><script>functionsend_wifi_data(){var wifi_ssid = document.getElementById("wifi_ssid").value;var wifi_password = document.getElementById("wifi_password").value;var xhttp =newXMLHttpRequest();
            xhttp.open("POST","/wifi_data",true);
            xhttp.onreadystatechange=function(){if(xhttp.readyState ==4){if(xhttp.status ==200){
                        console.log(xhttp.responseText);alert(xhttp.responseText);}elseif(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));}functionclear_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 设备在不同的网络环境下更容易连接。

希望这个教程对你有所帮助！如果有任何问题或建议，欢迎在下方留言讨论。

标签：物联网嵌入式硬件 c语言

本文转载自: https://blog.csdn.net/weixin_43126417/article/details/140400296
版权归原作者 水连珠tech 所有，如有侵权，请联系我们删除。

ESP32C3使用WEB网页配网教程