ESP32通过WEB页面连接WIFI+复位重连+删除已连WiFi(Arduino)

在ESP32官方的例程中,都是直接把WIFI的SSID和Password写死在程序里,但是在实际使用中网络环境是不固定的,如果更换了网络环境,就得重新修改程序,在实际运用中并不合理。我在网上找了很久也没找到类似的例程,于是便自己试着写了一个,我的思路如下:
在这里插入图片描述
首次上电会有一个ESP32发出的WIFI,手机连接这个WIFI,然后访问esp32的IP地址就会出现WIFI配置的网页:![在这里插入图片描述](https://img-blog.csdnimg.cn/20190818205530726.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQwOTE0OTA=,size_16,color_FFFFFF,t_70![在这里插入图片描述](https://img-blog.csdnimg.cn/2020032723511483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQwOTE0OTA=,size_16,color_FFFFFF,t_70
由于ESP32默认会自动保存WiFi信息,配置WiFi之后我们不用考虑怎么保存WiFi。

下面是完整的程序

#include <WiFi.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <esp_wifi.h>

const char* AP_SSID  = "ESP32_Config"; //热点名称
String wifi_ssid = "";
String wifi_pass = "";
String scanNetworksID = "";//用于储存扫描到的WiFi

#define ROOT_HTML  "<!DOCTYPE html><html><head><title>WIFI Config by lwang</title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><style type=\"text/css\">.input{display: block; margin-top: 10px;}.input span{width: 100px; float: left; float: left; height: 36px; line-height: 36px;}.input input{height: 30px;width: 200px;}.btn{width: 120px; height: 35px; background-color: #000000; border:0px; color:#ffffff; margin-top:15px; margin-left:100px;}</style><body><form method=\"GET\" action=\"connect\"><label class=\"input\"><span>WiFi SSID</span><input type=\"text\" name=\"ssid\"></label><label class=\"input\"><span>WiFi PASS</span><input type=\"text\"  name=\"pass\"></label><input class=\"btn\" type=\"submit\" name=\"submit\" value=\"Submie\"> <p><span> Nearby wifi:</P></form>"
WebServer server(80);

#define RESET_PIN   13  //用于删除WiFi信息

void setup() {
   

  Serial.begin(115200);
  pinMode(RESET_PIN, INPUT_PULLUP);

  // 连接WiFi
  if (!AutoConfig())
  {
   
    wifi_Config();
  }

  //用于删除已存WiFi
  if (digitalRead(RESET_PIN) == LOW) {
   
    delay(1000);
    esp_wifi_restore();
    delay(10);
    ESP.restart();  //复位esp32
  }
}

void loop() 
<think>好的,用户想实现ESP32-S3WiFi AP功能,并通过HTTP进行配网,手机连接后自动跳转到认证页面。首先,我需要回忆一下ESP32WiFi配置流程,尤其是AP模式下的设置ESP32-S3应该和之前的型号类似,但可能有细微差别,需要确认库的支持情况。 用户提到Captive Portal模式,这通常用于强制用户跳转到特定页面,比如公共WiFi的登录界面。因此,实现Captive Portal是关键步骤。需要了解ESP32是否支持Captive Portal,或者是否需要通过DNS劫持和HTTP定向来实现。 接下来是HTTP服务器的搭建。用户需要通过HTTP进行配网,所以需要处理POST请求,接收WiFi凭证。这部分需要配置路由处理,比如处理根路径“/”来显示配置页面,处理“/connect”来接收数据并连接WiFi。 然后是手机连接后自动跳转的问题。通常,当设备开启Captive Portal时,手机会尝试访问特定网址(如http://connectivitycheck.android.com/generate_204),如果设备拦截这些请求并返回302定向到认证页面,就能自动跳转。这可能需要设置DNS服务器,将所有的域名解析到ESP32的IP,然后HTTP服务器处理这些请求,返回定向响应。 代码方面,需要使用Arduino框架下的WiFi库和WebServer库。首先设置AP模式,启动HTTP服务器,然后定义处理函数。对于Captive Portal,可能需要捕获所有请求并定向。同时,处理配网请求后,需要断开AP,连接到目标WiFi,并启动其他服务。 需要注意的是,ESP32的存储可能需要保存WiFi凭证,可以使用Preferences库。另外,处理HTTP请求时,要确保数据解析正确,避免缓冲区溢出等安全问题。 可能遇到的问题包括:DNS服务器配置是否正确,定向是否生效,手机不同厂商的Captive Portal检测机制不同,需要测试兼容性。此外,配网后如何切换模式,可能需要启或新配置网络接口。 用户可能需要示例代码,所以应该提供基本的框架,包括设置AP、启动服务器、处理请求、保存配置等步骤。同时,引用相关资源,比如ESP32的官方文档或现有项目,如提到的ESP32Radio-V2,可能提供有用的参考。 最后,需要验证步骤,指导用户如何测试,连接ESP32的AP,查看是否自动跳转,提交表单后是否能连接到目标网络。可能还需要处理错误情况,比如错误的密码,连接超时等,给出提示信息。</think>要实现ESP32-S3的Wi-Fi AP模式并实现手机自动跳转认证页面,需要结合Captive Portal(强制门户)技术和HTTP服务器搭建,以下是分步实现指南: ### 一、基础环境搭建 1. 安装Arduino IDE开发环境 2. 添加ESP32开发板支持(需使用ESP32-S3兼容版本) 3. 安装必要库: - `WiFi.h`(ESP32内置) - `WebServer.h`(ESP32内置) - `DNSServer.h`(ESP32内置) ### 二、核心代码实现 ```cpp #include <WiFi.h> #include <WebServer.h> #include <DNSServer.h> DNSServer dnsServer; WebServer server(80); const char* ap_ssid = "ESP32-S3_Config"; const char* ap_password = "12345678"; void handleRoot() { String html = "<form action=&#39;/connect&#39; method=&#39;POST&#39;>" "SSID:<input type=&#39;text&#39; name=&#39;ssid&#39;><br>" "Password:<input type=&#39;password&#39; name=&#39;pass&#39;><br>" "<input type=&#39;submit&#39; value=&#39;Connect&#39;>" "</form>"; server.send(200, "text/html", html); } void handleConnect() { String ssid = server.arg("ssid"); String pass = server.arg("pass"); // 保存凭证并连接WiFi WiFi.begin(ssid.c_str(), pass.c_str()); server.send(200, "text/plain", "正在连接至 " + ssid); } void setup() { // 启动AP模式 WiFi.softAP(ap_ssid, ap_password); // DNS拦截所有域名 dnsServer.start(53, "*", WiFi.softAPIP()); // HTTP路由配置 server.on("/", handleRoot); server.on("/connect", HTTP_POST, handleConnect); // 捕获所有请求强制跳转 server.onNotFound([](){ server.sendHeader("Location", "http://" + WiFi.softAPIP().toString(), true); server.send(302, "text/plain", ""); }); server.begin(); } void loop() { dnsServer.processNextRequest(); server.handleClient(); } ``` ### 三、关键实现原理 1. **DNS劫持**:通过`DNSServer`将所有域名解析到ESP32的AP IP地址(默认192.168.4.1) 2. **HTTP定向**:通过`onNotFound`处理器强制跳转到认证页面 3. **认证页面**:通过HTML表单收集WiFi凭证,POST到`/connect`端点 4. **网络切换**:收到凭证后使用`WiFi.begin()`连接目标网络[^1] ### 四、功能优化建议 1. 添加EEPROM保存WiFi凭证功能 2. 实现连接状态指示灯 3. 增加配网超时自动复位功能 4. 支持多语言认证页面 ### 五、验证步骤 1. 手机搜索WiFi热点"ESP32-S3_Config" 2. 连接后自动弹出浏览器跳转至配置页面 3. 输入目标WiFi的SSID和密码 4. ESP32将尝试连接指定网络
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值