前言
在上一篇 Blinker 开发入门指南 中，我们了解了 Blinker 的基础用法。但在实际项目中，WiFi 名称和密码写死在代码里非常不方便——每换一个网络就要重新烧录。
本文介绍一个 ESP32 Web 配网方案，通过手机连接 ESP32 热点，在网页上配置 WiFi 和 Blinker 授权码，配置保存后开机自动重连。
功能特性
- 开机自动连接已保存的 WiFi
- 连接失败时自动进入配网模式（AP 热点 + Web 服务器）
- Web 页面支持 WiFi 扫描选择、密码输入、Blinker 授权码填写
- 历史配置记录（最多3条），点击快速填充
- GPIO0 长按3秒清除配置并重启
- LED 指示灯状态：常亮=已连接，闪烁=配网中，熄灭=断开
项目结构
ESP32_Blinker_NET/
├── src/
│ ├── main.cpp # 主程序：Blinker 初始化 + WiFi 管理
│ └── WIFIConnect.cpp # WiFi 配网模块实现
├── include/
│ └── WIFIConnect.h # WiFi 配网模块头文件
├── lib/
│ └── blinker-library-master/ # 本地 Blinker 库
└── platformio.ini # PlatformIO 配置
工作流程
flowchart TD
A[开机] --> B{有已保存配置?}
B -->|是| C[尝试连接WiFi]
B -->|否| D[进入配网模式]
C -->|成功| E[初始化Blinker]
C -->|失败 20秒超时| D
D --> F[ESP32_Config热点]
F --> G[手机连接热点]
G --> H[访问192.168.4.1]
H --> I[Web页面配置]
I --> J[保存配置]
J --> K[ESP32重启]
K --> C
E --> L[正常运行]
L --> M{WiFi断开?}
M -->|是| N[自动重连]
M -->|否| L
N -->|重连失败3分钟| O[重启ESP32]
核心代码解析
主程序 main.cpp
主程序非常简洁，核心逻辑就三步：
1#define BLINKER_PRINT Serial
2#define BLINKER_WIFI
3
4#include <Blinker.h>
5#include "WIFIConnect.h"
6
7WIFIConnect wifiManager("ESP32_Config");
8
9void setup() {
10 Serial.begin(115200);
11 wifiManager.begin();
12
13 if (wifiManager.isConnected()) {
14 Blinker.begin(
15 wifiManager.getAuth().c_str(),
16 wifiManager.getSSID().c_str(),
17 ""
18 );
19 Blinker.attachData(dataRead);
20 }
21}
22
23void loop() {
24 wifiManager.loop();
25 if (wifiManager.isConnected()) {
26 Blinker.run();
27 }
28}
关键点：
wifiManager.begin()内部处理了所有 WiFi 连接逻辑Blinker.begin()的密码参数传空字符串，因为 WiFi 已经通过WiFi.begin()连接loop()中先处理 WiFi 状态，再运行 Blinker
WIFIConnect 类
这是配网的核心模块，封装了 AP 热点、Web 服务器、DNS 重定向、EEPROM 存储等功能。
初始化流程：
1void WIFIConnect::begin() {
2 pinMode(_ledPin, OUTPUT);
3 pinMode(_resetPin, INPUT_PULLUP);
4
5 if (restoreConfig()) {
6 // 有保存的配置 → 尝试连接
7 WiFi.begin(savedSSID, savedPassword);
8 // 等待20秒...
9 if (WiFi.status() == WL_CONNECTED) {
10 // 连接成功
11 } else {
12 setupMode(); // 进入配网模式
13 }
14 } else {
15 setupMode(); // 无配置，直接配网
16 }
17}
配网模式启动：
1void WIFIConnect::setupMode() {
2 WiFi.mode(WIFI_AP);
3 WiFi.softAP(_apName); // 创建热点 "ESP32_Config"
4 dnsServer.start(53, "*", IPAddress(192, 168, 4, 1)); // DNS重定向
5 server.on("/", HTTP_GET, handleRootCallback);
6 server.on("/save", HTTP_POST, handleSaveCallback);
7 server.begin();
8 scanWiFi(); // 扫描可用WiFi
9}
配置保存：
1void WIFIConnect::handleSave() {
2 String ssid = server.arg("ssid");
3 String password = server.arg("password");
4 String auth = server.arg("auth");
5
6 preferences.putString("ssid", ssid);
7 preferences.putString("password", password);
8 preferences.putString("auth", auth);
9 saveWiFiHistory(ssid, password, auth);
10
11 delay(1000);
12 ESP.restart(); // 保存后重启
13}
Web 配网页面
配网页面包含：
- WiFi 网络下拉选择（自动扫描）
- WiFi 密码输入（支持显示/隐藏切换）
- Blinker 授权码输入
- 历史配置列表（点击快速填充）
- 保存并连接按钮
页面使用渐变背景和圆角卡片设计，手机端体验友好。
WiFi 掉线检测
1void WIFIConnect::loop() {
2 // 每5秒检查WiFi状态
3 if (millis() - lastWifiCheck > 5000) {
4 if (WiFi.status() != WL_CONNECTED && !_isSettingMode) {
5 WiFi.begin(savedSSID, savedPassword); // 尝试重连
6 }
7 lastWifiCheck = millis();
8 }
9
10 // 长按GPIO0超过3秒 → 清除配置重启
11 if (digitalRead(_resetPin) == LOW) {
12 if (millis() - _buttonPressStartTime > 3000) {
13 reset();
14 }
15 }
16}
硬件连接
| 引脚 | 功能 | 说明 |
|---|---|---|
| GPIO2 | LED 指示灯 | 连接=常亮，配网=闪烁，断开=熄灭 |
| GPIO0 | 重置按键 | 长按3秒清除配置并重启 |
使用步骤
- 烧录固件到 ESP32
- 手机连接热点
ESP32_Config - 浏览器访问
192.168.4.1 - 选择 WiFi、输入密码和 Blinker 授权码
- 点击保存，ESP32 自动重启并连接
总结
这个 Web 配网方案解决了 Blinker 项目中 WiFi 配置固化的问题，通过 Web 页面和历史记录功能，让用户无需重新烧录即可切换网络。配合 Blinker 的心跳包和回调机制，可以快速搭建物联网应用。
本项目完整代码见
E:\Embedded\库\Blinker开发规范\ESP32_Blinker_NET