ESP32C3使用WEB网页配网教程

2024-10-11 前端 0

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_wificfgcd esp_web_wificfg

或者

git clone https://gitee.com/renbingcheng/esp_web_wificfgcd 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 5static EventGroupHandle_t s_wifi_event_group;#define WIFI_CONNECTED_BIT BIT0#define WIFI_FAIL_BIT BIT1static 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>