WiFi配网新体验：用ESP32/ESP8266打造美观实用的配网页面

2023-09-19 08:25:42

利用强制门户登录实现高颜值ESP32/ESP8266 WiFi配网

前言

在物联网时代，为设备配置WiFi连接至关重要。传统的手动输入方式既繁琐又容易出错。为了解决这一难题，强制门户登录技术应运而生。本文将详细介绍如何使用强制门户登录为ESP32/ESP8266设备构建一个美观且实用的WiFi配网页面，让您告别繁琐的手动操作。

什么是强制门户登录？

强制门户登录是一种网络安全技术，当设备连接到特定的WiFi网络时，会自动弹出登录页面。此页面要求用户输入凭据才能访问互联网或其他网络资源。在ESP32/ESP8266 WiFi配网中，强制门户登录可以自动触发配网页面，简化连接过程。

实现高颜值WiFi配网页面

HTML页面设计

配网页面的HTML代码负责页面外观和交互功能。我们的页面集颜值与实用性于一身，包含以下元素：

醒目的 ** 下拉选择框：* 自动显示搜索到的WiFi网络列表供用户选择
密码输入框： 隐藏密码输入，保护隐私
连接按钮： 触发WiFi连接过程
中英文切换： 满足不同语言用户的需求

下拉选择框功能

下拉选择框将搜索到的WiFi网络信息记录并显示在选项列表中，让用户轻松选择要连接的网络。此功能避免了手动输入网络名称的麻烦，降低了出错率。

中英文切换

考虑到不同语言用户的需求，我们的页面支持中英文切换。只需点击切换按钮，即可无缝切换语言版本，提升用户体验。

代码示例

// HTML页面代码
const char* index_html =
  "<!DOCTYPE html>"
  "<html>"
  "<head>"
  ""
  "<meta charset=\"UTF-8\">"
  "</head>"
  "<body>"
  "<h1>ESP32/ESP8266 WiFi配网</h1>"
  "<form action=\"/connect\" method=\"POST\">"
  "  <label for=\"ssid\">WiFi名称：</label>"
  "  <select name=\"ssid\">"
  "    <option value=\"\" disabled selected>请选择</option>";

// 搜索到的WiFi列表
String wifiList = "";

// 定义下拉选择框选项
for (int i = 0; i < WiFi.scanNetworks(); i++) {
  wifiList += "<option value=\"" + WiFi.SSID(i) + "\">" + WiFi.SSID(i) + "</option>";
}

// 将搜索到的WiFi信息添加到HTML页面中
index_html += wifiList;

// 继续定义HTML页面内容
index_html +=
  "  </select>"
  "  <br>"
  "  <label for=\"password\">WiFi密码：</label>"
  "  <input type=\"password\" name=\"password\">"
  "  <br>"
  "  <input type=\"submit\" value=\"连接\">"
  "</form>"
  "</body>"
  "</html>";

实施强制门户登录

接入点模式

首先，将ESP32/ESP8266设备设置为接入点模式，创建一个临时的WiFi网络。

AsyncWebServer

我们使用AsyncWebServer库创建了一个Web服务器，负责处理强制门户登录和WiFi连接请求。

处理连接请求

当用户输入WiFi凭据并点击"连接"按钮时，Web服务器将处理连接请求，自动建立与目标WiFi网络的连接。

成功页面

连接成功后，Web服务器会将用户重定向到一个成功页面，通知用户已成功连接到WiFi网络。

代码示例

// 处理WiFi连接请求
void handleConnect() {
  String ssid = server.arg("ssid");
  String password = server.arg("password");

  WiFi.begin(ssid.c_str(), password.c_str());

  // 等待连接
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }

  // 重定向到成功页面
  server.sendHeader("Location", "/success", true);
  server.send(302, "Moved Permanently", "");
}

// 处理成功页面
void handleSuccess() {
  String html =
    "<!DOCTYPE html>"
    "<html>"
    "<head>"
    ""
    "<meta charset=\"UTF-8\">"
    "</head>"
    "<body>"
    "<h1>连接成功</h1>"
    "<p>您已成功连接到WiFi网络。</p>"
    "</body>"
    "</html>";

  server.send(200, "OK", html);
}