深入学习 esp8266 wifimanager源码解析（打造专属自己的web配网）
授人以鱼不如授人以渔，目的不是为了教会你具体项目开发，而是学会学习的能力。希望大家分享给你周边需要的朋友或者同学，说不定大神成长之路有博哥的奠基石。。。
共同学习成长QQ群
622368884，不喜勿加，里面有一大群志同道合的探路人
快速导航
单片机菜鸟的博客快速索引(快速找到你要的)
如果觉得有用，麻烦点赞收藏，您的支持是博主创作的动力。
文章目录
- 1.前言
- 2.WiFiManager
- 2.1 WiFiManager源码地址
- 2.2 WiFiManager是什么
- 2.3 安装WiFiManager 库
- 2.4 WiFiManager工作原理
- 2.5 如何引入WiFiManager库
- 3.WifiManager源码解析
- 3.1 配置类方法
- 3.1.1 setConfigPortalTimeout/setTimeout —— 配置认证超时
- 3.1.2 setConnectTimeout —— 设置sta连接超时时间
- 3.1.3 setDebugOutput —— 设置是否打开debug模式
- 3.1.4 setAPStaticIPConfig —— 设置固定AP，包括ip、网关、子网掩码
- 3.1.5 setSTAStaticIPConfig —— 设置固定STA，包括ip、网关、子网掩码
- 3.1.6 setMinimumSignalQuality —— 设置最小的信号质量
- 3.1.7 setBreakAfterConfig —— 设置WEB配置失败后是否退出配置
- 3.1.8 setAPCallback —— 设置开启AP模式配置时的通知回调
- 3.1.9 setSaveConfigCallback —— 设置保存Web配置后的回调
- 3.1.10 addParameter —— 配置页面添加自定义参数
- 3.1.11 setCustomHeadElement——设置自定义页面的头部元素
- 3.1.12 setRemoveDuplicateAPs——设置是否过滤重复的AP热点
- 3.1.13 resetSettings——重置配置
- 3.1.14 getConfigPortalSSID——获取WEB配置的SSID
- 3.2 连接类方法
- 3.2.1 autoConnect —— 自动连接到上一次保存的AP热点，如果连接失败，进入AP配网模式
- 3.2.2 startConfigPortal —— 启动web配置
- 3.2.2.1 handleRoot —— 根目录页面
- 3.2.2.2 handleWifi —— 配置Wifi信息
- 3.2.2.3 handleWifiSave —— 保存Wifi信息
- 3.2.2.4 handleInfo —— 获取ESP的信息
- 3.2.2.5 handleReset —— 重置Wifi模块信息
- 4.官方实例操作
- 5.打造专属自己的web配网
- 5.1 CustomWifiManager —— 站在巨人肩膀上
- 5.1.1 setHeadImgBase64 —— 支持自定义ICON头像
- 5.1.2 setButtonBackground—— 自定义按钮背景颜色
- 5.1.3 setButtonTextColor—— 自定义按钮字体颜色
- 5.1.4 setPageTitle—— 自定义页面标题
- 5.2 案例
- 6.总结
1.前言
废话少说，本篇博文的目的就是深入学习 WifiManager 这个github上非常火爆的ESP8266 web配网库，让初学者不再对web配网感到迷茫，并且通过学习第三方库来自定义自己的web配网功能。等你学习整篇博文，你会发现 So easy！！
2.WiFiManager
2.1 WiFiManager源码地址
- 直接点击 github 下载代码
2.2 WiFiManager是什么
一句话概括：
- ESP8266 WiFi连接管理器，主要是提供Web页面配置功能，包括Web配网、自定义参数配置；
2.3 安装WiFiManager 库
第一步：
- 这个库是跟ESP8266 Arduino核心库一起使用，所以用户需要配置好Arduino For ESP8266平台，具体请参考 ESP8266开发之旅 基础篇② 如何安装ESP8266的Arduino开发环境
第二步：
- 可以通过Arduino IDE库管理器安装WiFiManager，搜索“WiFiManager”，然后点击下载（适合新手小白，直接上手使用）
- 也可以直接通过github下载源码，放到你的Arduino libraries文件夹（深入学习者，可以查看源码然后改造源码，达到自定义配网功能）
2.4 WiFiManager工作原理
- 1、当你的ESP8266上电启动时，它首先进入STA模式，然后尝试去连接之前已经保存过的AP热点（如果你不了解STA和AP的区别，麻烦参考 ESP8266开发之旅 网络篇③ Soft-AP——ESP8266WiFiAP库的使用 和 ESP8266开发之旅 网络篇④ Station——ESP8266WiFiSTA库的使用）；
- 2、如果连接失败（可能是因为没有保存上一次的热点信息），那么该库就会让ESP进入AP模式并且提供AP热点，启动并监听DNS服务以及Web服务（默认ip地址是192.168.4.1）（如果你不了解 DNS服务 和 Web服务的概念，麻烦参考 ESP8266开发之旅 网络篇⑮ DNSServer——真正的域名服务 和 ESP8266开发之旅 网络篇⑪ WebServer——ESP8266WebServer库的使用）
- 3、使用任何可以连接WiFi并且可以使用浏览器的设备（包括电脑、手机、平板）去连接ESP生成的AP热点
- 4、由于 DNS服务 Captive Portal功能的存在，会导致任何的网络请求都重定向到 认证配置页面（也就是我们的Web配置页面）
- 5、选择任意一个扫描到的AP热点，输入热点密码，点击保存
- 6、ESP会尝试去连接新AP热点，如果连接成功，就返回到我们的正常业务，连接失败，就会再次重复上面的操作
2.5 如何引入WiFiManager库
非常简单，直接引入：
#include 至于怎么样去彻底了解这个库的使用方法，请看博主下面的源码分析。
3.WifiManager源码解析
通过查阅WifiManager的源码，整体代码非常简单，提供出来的方法调用也不多。这里博主就一个个方法详细讲解，并且深入去分析代码，以便后面自定义自己的WifiManager。主要分为几类方法：
- 配置类方法
- 连接类方法
博主建议：先了解有什么方法，然后在后面例子讲解中去感受方法的使用。
3.1 配置类方法
主要包括：
- setConfigPortalTimeout
- setTimeout
- setConnectTimeout
- setDebugOutput
- setMinimumSignalQuality
- setAPStaticIPConfig
- setSTAStaticIPConfig
- setAPCallback
- setSaveConfigCallback
- addParameter
- setBreakAfterConfig
- setCustomHeadElement
- setRemoveDuplicateAPs
- resetSettings
- getConfigPortalSSID
3.1.1 setConfigPortalTimeout/setTimeout —— 配置认证超时
函数说明：
/**
* 功能描述：配置认证超时
* @param seconds 秒数为单位
*/
void WiFiManager::setTimeout(unsigned long seconds) {
setConfigPortalTimeout(seconds);
}
/**
* 功能描述：配置认证超时
* @param seconds 秒数为单位
*/
void WiFiManager::setConfigPortalTimeout(unsigned long seconds) {
_configPortalTimeout = seconds * 1000;
}
注意点：
- 配置界面超时，指的是用户进入配置界面后多少秒之内如果没有处理完毕就退出整个配置过程；
- 默认情况下，_configPortalTimeout 等于0，也就是不限制时间；
3.1.2 setConnectTimeout —— 设置sta连接超时时间
函数说明：
/**
* 功能描述：设置sta连接超时,超过时间就返回连接状态
* @param seconds 秒数为单位
*/
void WiFiManager::setConnectTimeout(unsigned long seconds) {
_connectTimeout = seconds * 1000;
}
注意点：
- 正常情况下，_connectTimeout等于0，也就是直接等待连接状态。
3.1.3 setDebugOutput —— 设置是否打开debug模式
函数说明：
/**
* 功能描述：设置是否打开debug
* @param debug true or false
*/
void WiFiManager::setDebugOutput(boolean debug) {
_debug = debug;
}
注意点：
- 建议调试阶段把该功能打开，可以清晰知道整个运行流程。等待调试完毕，关闭调试功能；
3.1.4 setAPStaticIPConfig —— 设置固定AP，包括ip、网关、子网掩码
函数说明：
/**
* 功能描述：设置固定AP，包括ip、网关、子网掩码
* @param ip ip地址
* @param gw 网关地址
* @param sn 子网掩码
*/
void WiFiManager::setAPStaticIPConfig(IPAddress ip, IPAddress gw, IPAddress sn) {
_ap_static_ip = ip;
_ap_static_gw = gw;
_ap_static_sn = sn;
}
注意点：
- 此方法用于设置ESP在AP模式下固定的AP信息，不设置默认为192.168.4.1
3.1.5 setSTAStaticIPConfig —— 设置固定STA，包括ip、网关、子网掩码
函数说明：
/**
* 功能描述：设置固定STA，包括ip、网关、子网掩码
* @param ip ip地址
* @param gw 网关地址
* @param sn 子网掩码
*/
void WiFiManager::setSTAStaticIPConfig(IPAddress ip, IPAddress gw, IPAddress sn) {
_sta_static_ip = ip;
_sta_static_gw = gw;
_sta_static_sn = sn;
}
注意点：
- 此方法用于设置ESP在STA模式下固定的STA信息，不设置默认由DHCP分配；
3.1.6 setMinimumSignalQuality —— 设置最小的信号质量
函数说明：
/**
* 功能描述：设置能够接受的最低信号强度
* @param quality 信号强度，默认为8
*/
void WiFiManager::setMinimumSignalQuality(int quality) {
_minimumQuality = quality;
}
注意点：
- 此方法用来过滤信号强度低于quality的AP热点，用于scan扫描时过滤；
3.1.7 setBreakAfterConfig —— 设置WEB配置失败后是否退出配置
函数说明：
/**
* 功能描述：设置WEB配置失败后是否退出配置
* @param shouldBreak 是否退出配置，默认是false
*/
void WiFiManager::setBreakAfterConfig(boolean shouldBreak) {
_shouldBreakAfterConfig = shouldBreak;
}
3.1.8 setAPCallback —— 设置开启AP模式配置时的通知回调
函数说明：
/**
* 功能描述：设置开启AP模式配置时的通知回调
* @param func 回调函数
*/
void WiFiManager::setAPCallback( void (*func)(WiFiManager* myWiFiManager) ) {
_apcallback = func;
}
注意点：
- 此方法主要是告知我们已经进入了配置模式了；
3.1.9 setSaveConfigCallback —— 设置保存Web配置后的回调
函数说明：
//start up save config callback
/**
* 功能描述：设置保存Web配置后的回调
* @param func 回调函数
*/
void WiFiManager::setSaveConfigCallback( void (*func)(void) ) {
_savecallback = func;
}
注意点：
- 此方法主要是告知我们已经点击保存配置信息了；
3.1.10 addParameter —— 配置页面添加自定义参数
函数说明：
/**
* 功能描述：配置页面添加自定义参数
* @param WiFiManagerParameter 自定义参数
*/
bool WiFiManager::addParameter(WiFiManagerParameter *p) {
if(_paramsCount + 1 > _max_params)
{
// rezise the params array
_max_params += WIFI_MANAGER_MAX_PARAMS;
DEBUG_WM(F("Increasing _max_params to:"));
DEBUG_WM(_max_params);
WiFiManagerParameter** new_params = (WiFiManagerParameter**)realloc(_params, _max_params * sizeof(WiFiManagerParameter*));
if (new_params != NULL) {
_params = new_params;
} else {
DEBUG_WM(F("ERROR: failed to realloc params, size not increased!"));
return false;
}
}
_params[_paramsCount] = p;
_paramsCount++;
DEBUG_WM(F("Adding parameter"));
DEBUG_WM(p->getID());
return true;
}
注意点：
- 普通情况下我们一般只配置SSID和Password，如果你还需要添加额外的参数（比如MQTT IP和port等等），那么这个方法就比较有用；
WiFiManagerParameter:
class WiFiManagerParameter {
public:
/**
Create custom parameters that can be added to the WiFiManager setup web page
@id is used for HTTP queries and must not contain spaces nor other special characters
*/
WiFiManagerParameter(const char *custom);
WiFiManagerParameter(const char *id, const char *placeholder, const char *defaultValue, int length);
WiFiManagerParameter(const char *id, const char *placeholder, const char *defaultValue, int length, const char *custom);
~WiFiManagerParameter();
// 这里比较需要注意的是 id值，这个会在html submit的时候返回给webserver，一定不能包含空格或者其他特殊字符
const char *getID();
const char *getValue();
const char *getPlaceholder();
int getValueLength();
const char *getCustomHTML();
private:
const char *_id;
const char *_placeholder;
char *_value;
int _length;
const char *_customHTML;
void init(const char *id, const char *placeholder, const char *defaultValue, int length, const char *custom);
friend class WiFiManager;
};
3.1.11 setCustomHeadElement——设置自定义页面的头部元素
函数说明：
/**
* 功能描述：添加一个自定义的element到页面头部 比如加个头像
* @param element element样式的字符串
*/
void WiFiManager::setCustomHeadElement(const char* element) {
_customHeadElement = element;
}
注意点：
- 如果你觉得官方提供的界面样式看起来不爽，那么你可以试试这个方法，试图去改变点样式；
3.1.12 setRemoveDuplicateAPs——设置是否过滤重复的AP热点
函数说明：
//if this is true, remove duplicated Access Points - defaut true
/**
* 功能描述：设置是否过滤重复的AP热点，默认过滤
* @param removeDuplicates true or false，default true
*/
void WiFiManager::setRemoveDuplicateAPs(boolean removeDuplicates) {
_removeDuplicateAPs = removeDuplicates;
}
3.1.13 resetSettings——重置配置
函数说明：
/**
* 功能描述：重置配置
* @param seconds 秒数为单位
*/
void WiFiManager::resetSettings() {
DEBUG_WM(F("settings invalidated"));
DEBUG_WM(F("THIS MAY CAUSE AP NOT TO START UP PROPERLY. YOU NEED TO COMMENT IT OUT AFTER ERASING THE DATA."));
// 断开wifi连接，设置当前配置SSID和pwd为null 设置为true，那么就会关闭Station模式
WiFi.disconnect(true);
//delay(200);
}
3.1.14 getConfigPortalSSID——获取WEB配置的SSID
函数说明：
/**
* 功能描述：获取AP配置的SSID
*/
String WiFiManager::getConfigPortalSSID() {
return _apName;
}
3.2 连接类方法
所谓连接类方法，也就是跟wifi连接过程中相关的方法。此类方法包括：
- autoConnect
- startConfigPortal
3.2.1 autoConnect —— 自动连接到上一次保存的AP热点，如果连接失败，进入AP配网模式
函数说明：
/**
* 功能说明：自动连接到上一次保存的AP热点，如果连接失败，进入AP配网模式
*/
boolean WiFiManager::autoConnect() {
// 默认的AP ssid
String ssid = "ESP" + String(ESP.getChipId());
return autoConnect(ssid.c_str(), NULL);
}
/**
* 功能说明：自动连接到上一次保存的AP热点，如果连接失败，进入AP配网模式
* @param apName ap模式下的名字
* @param apPassword ap模式下的密码
*/
boolean WiFiManager::autoConnect(char const *apName, char const *apPassword) {
DEBUG_WM(F(""));
DEBUG_WM(F("AutoConnect"));
// read eeprom for ssid and pass 这里可以从eeprom获取ssid和password
//String ssid = getSSID();
//String pass = getPassword();
// attempt to connect; should it fail, fall back to AP
WiFi.mode(WIFI_STA);
if (connectWifi("", "") == WL_CONNECTED) {
DEBUG_WM(F("IP Address:"));
DEBUG_WM(WiFi.localIP());
//connected
return true;
}
// 如果连接失败 直接进入配网管理
return startConfigPortal(apName, apPassword);
}
注意点：
- 这两个方法都会自动连接到上一次保存的AP热点，连接失败，就会进入web配网页面（也就是 startConfigPortal 这个方法）。用户可以自定义AP模式下的SSID和Password（也就是调用方法2）。
connectWifi方法代码：
/**
* 功能描述：连接Ap热点
* @param ssid 热点名称
* @param pass 热点密码
* @return 连接状态
*/
int WiFiManager::connectWifi(String ssid, String pass) {
DEBUG_WM(F("Connecting as wifi client..."));
// check if we've got static_ip settings, if we do, use those.
// 判断我们是否配置了sta（ip地址、网关地址、子网掩码），有配置就设置配置内容
if (_sta_static_ip) {
DEBUG_WM(F("Custom STA IP/GW/Subnet"));
WiFi.config(_sta_static_ip, _sta_static_gw, _sta_static_sn);
DEBUG_WM(WiFi.localIP());
}
//fix for auto connect racing issue
// 如果连接成功了 直接返回
if (WiFi.status() == WL_CONNECTED && (WiFi.SSID() == ssid)) {
DEBUG_WM(F("Already connected. Bailing out."));
return WL_CONNECTED;
}
//check if we have ssid and pass and force those, if not, try with last saved values
// 判断有没有传入自定义的 ssid和 pass，没有就用上次存储的
if (ssid != "") {
// 连接wifi
WiFi.begin(ssid.c_str(), pass.c_str());
} else {
if (WiFi.SSID() != "") {
DEBUG_WM(F("Using last saved values, should be faster"));
//trying to fix connection in progress hanging
ETS_UART_INTR_DISABLE();
wifi_station_disconnect();
ETS_UART_INTR_ENABLE();
// 连接wifi
WiFi.begin();
} else {
DEBUG_WM(F("No saved credentials"));
}
}
// 等待连接结果
int connRes = waitForConnectResult();
DEBUG_WM ("Connection result: ");
DEBUG_WM ( connRes );
//not connected, WPS enabled, no pass - first attempt
#ifdef NO_EXTRA_4K_HEAP
if (_tryWPS && connRes != WL_CONNECTED && pass == "") {
startWPS();
//should be connected at the end of WPS
connRes = waitForConnectResult();
}
#endif
return connRes;
}
/**
* 功能描述：等待连接结果
* 如果没有设置连接超时 直接返回状态
* 如果设置了连接超时 在规定时间内等待连接状态
*/
uint8_t WiFiManager::waitForConnectResult() {
if (_connectTimeout == 0) {
return WiFi.waitForConnectResult();
} else {
DEBUG_WM (F("Waiting for connection result with time out"));
unsigned long start = millis();
boolean keepConnecting = true;
uint8_t status;
while (keepConnecting) {
status = WiFi.status();
// 判断连接是否超时
if (millis() > start + _connectTimeout) {
keepConnecting = false;
DEBUG_WM (F("Connection timed out"));
}
if (status == WL_CONNECTED) {
keepConnecting = false;
}
delay(100);
}
return status;
}
}
注意点：
- DEBUG_WM debug功能的实现由 setDebugOutput 控制
- _sta_static_ip 的值 由 setSTAStaticIPConfig 设置
- waitForConnectResult 里面 的 _connectTimeout 由 setConnectTimeout 设置
3.2.2 startConfigPortal —— 启动web配置
函数说明：
/**
* 功能说明：配置认证，默认ssid为esp+chipid
*/
boolean WiFiManager::startConfigPortal() {
String ssid = "ESP" + String(ESP.getChipId());
return startConfigPortal(ssid.c_str(), NULL);
}
/**
* 功能说明：配置认证，切换到AP模式 然后配置webserver和dnsserver，响应web请求
* @param apName ap名字
* @param apPassword ap密码
*/
boolean WiFiManager::startConfigPortal(char const *apName, char const *apPassword) {
// 如果没有连接上网络 切换到AP模式
if(!WiFi.isConnected()){
WiFi.persistent(false);
// disconnect sta, start ap
WiFi.disconnect(); // this alone is not enough to stop the autoconnecter
WiFi.mode(WIFI_AP);
WiFi.persistent(true);
}
else {
//setup AP 切换到AP-STA模式
WiFi.mode(WIFI_AP_STA);
DEBUG_WM(F("SET AP STA"));
}
_apName = apName;
_apPassword = apPassword;
//notify we entered AP mode
// 通知我们进入AP模式，可以执行回调方法
if ( _apcallback != NULL) {
_apcallback(this);
}
connect = false;
// 配置信息 这是非常关键的一个方法，主要是配置webserver、DNSserver
setupConfigPortal();
while(1){
// check if timeout 判断是否配置超时
if(configPortalHasTimeout()) break;
//DNS 处理dns请求
dnsServer->processNextRequest();
//HTTP 处理web请求
server->handleClient();
if (connect) {
connect = false;
delay(2000);
DEBUG_WM(F("Connecting to new AP"));
// using user-provided _ssid, _pass in place of system-stored ssid and pass
// 使用用户提供的wifi账号密码来设置
if (connectWifi(_ssid, _pass) != WL_CONNECTED) {
DEBUG_WM(F("Failed to connect."));
} else {
//connected
WiFi.mode(WIFI_STA);
//notify that configuration has changed and any optional parameters should be saved
// 通知外面wifi连接成功，可以做一些额外操作
if ( _savecallback != NULL) {
//todo: check if any custom parameters actually exist, and check if they really changed maybe
_savecallback();
}
break;
}
// 判断配置后是否断开
if (_shouldBreakAfterConfig) {
//flag set to exit after config after trying to connect
//notify that configuration has changed and any optional parameters should be saved
if ( _savecallback != NULL) {
//todo: check if any custom parameters actually exist, and check if they really changed maybe
_savecallback();
}
break;
}
}
yield();
}
server.reset();
dnsServer.reset();
return WiFi.status() == WL_CONNECTED;
}
注意点：
- configPortalHasTimeout 用来判断是否在认证界面配置超时
- _apcallback 通过 setAPCallback 设置
- _savecallback 通过 setSaveConfigCallback 设置，主要用于配置完毕后保存一些信息；
- _shouldBreakAfterConfig 通过 setBreakAfterConfig 设置，主要用来判断配置失败后是否保存信息退出；
关键方法 setupConfigPortal（一定要看博主在源码中的注释）：
/**
* 功能描述：配置web服务以及dns重定向功能
*/
void WiFiManager::setupConfigPortal() {
// 配置dns服务（这里主要是用到重定向功能）
dnsServer.reset(new DNSServer());
// 配置web服务 主要用来显示web页面 实现AP配网之类的功能
server.reset(new ESP8266WebServer(80));
DEBUG_WM(F(""));
_configPortalStart = millis();
DEBUG_WM(F("Configuring access point... "));
DEBUG_WM(_apName);
if (_apPassword != NULL) {
if (strlen(_apPassword) < 8 || strlen(_apPassword) > 63) {
// fail passphrase to short or long!
DEBUG_WM(F("Invalid AccessPoint password. Ignoring"));
_apPassword = NULL;
}
DEBUG_WM(_apPassword);
}
//optional soft ip config
// 配置自定义固定AP信息
if (_ap_static_ip) {
DEBUG_WM(F("Custom AP IP/GW/Subnet"));
WiFi.softAPConfig(_ap_static_ip, _ap_static_gw, _ap_static_sn);
}
// 配置AP热点
if (_apPassword != NULL) {
WiFi.softAP(_apName, _apPassword);//password option
} else {
WiFi.softAP(_apName);
}
delay(500); // Without delay I've seen the IP address blank
DEBUG_WM(F("AP IP address: "));
DEBUG_WM(WiFi.softAPIP());
/* Setup the DNS server redirecting all the domains to the apIP */
// 配置DNS 重定向功能 全部请求都重定向到AP
dnsServer->setErrorReplyCode(DNSReplyCode::NoError);
dnsServer->start(DNS_PORT, "*", WiFi.softAPIP());
/* Setup web pages: root, wifi config pages, SO captive portal detectors and not found. */
// 配置Web服务器的功能 这里就是实现AP配网功能
server->on(String(F("/")).c_str(), std::bind(&WiFiManager::handleRoot, this));
server->on(String(F("/wifi")).c_str(), std::bind(&WiFiManager::handleWifi, this, true));
server->on(String(F("/0wifi")).c_str(), std::bind(&WiFiManager::handleWifi, this, false));
server->on(String(F("/wifisave")).c_str(), std::bind(&WiFiManager::handleWifiSave, this));
server->on(String(F("/i")).c_str(), std::bind(&WiFiManager::handleInfo, this));
server->on(String(F("/r")).c_str(), std::bind(&WiFiManager::handleReset, this));
//server->on("/generate_204", std::bind(&WiFiManager::handle204, this)); //Android/Chrome OS captive portal check.
server->on(String(F("/fwlink")).c_str(), std::bind(&WiFiManager::handleRoot, this)); //Microsoft captive portal. Maybe not needed. Might be handled by notFound handler.
server->onNotFound (std::bind(&WiFiManager::handleNotFound, this));
server->begin(); // Web server start
DEBUG_WM(F("HTTP server started"));
}
注意点：
- _ap_static_ip 通过 setAPStaticIPConfig 设置，设置AP模式下的固定IP信息
- handleRoot 处理域的web请求，比如 192.168.4.1
- handleWifi 处理web配置页面的请求
- handleWifiSave 处理wifi配置信息保存请求
- handleInfo 处理wifi信息的展示
- handleReset 处理wifi配置重置的请求
接下来，重点讲解handleXXX方法的具体内容以及展示页面（后面打造专属自己的web配网也是从这里修改）。
3.2.2.1 handleRoot —— 根目录页面
函数说明：
/** Handle root or redirect to captive portal */
/**
* 功能描述：响应root请求，也就是ip请求
*/
void WiFiManager::handleRoot() {
DEBUG_WM(F("Handle root"));
if (captivePortal()) { // If caprive portal redirect instead of displaying the page.
return;
}
// 这里就会显示一个通用页面了
String page = FPSTR(HTTP_HEADER);
page.replace("{v}", "Options");
page += FPSTR(HTTP_SCRIPT);
page += FPSTR(HTTP_STYLE);
page += _customHeadElement;
page += FPSTR(HTTP_HEADER_END);
page += String(F(""
));
page += _apName;
page += String(F(""));
page += String(F("WiFiManager
"));
page += FPSTR(HTTP_PORTAL_OPTIONS);
page += FPSTR(HTTP_END);
server->sendHeader("Content-Length", String(page.length()));
server->send(200, "text/html", page);
}
注意点：
- 此方法是整个配置页面的入口页面，会包含后面一些列操作的入口
- 这里拼接了一个web页面返回，包括自定义的 _customHeadElement
Root 页面的HTML+CSS+JS代码（这里是我们后面打造专属自己样式的关键）：
const char HTTP_HEADER[] PROGMEM = "{v} ";
const char HTTP_STYLE[] PROGMEM = "";
const char HTTP_SCRIPT[] PROGMEM = "";
const char HTTP_HEADER_END[] PROGMEM = "";
const char HTTP_PORTAL_OPTIONS[] PROGMEM = "
";
const char HTTP_ITEM[] PROGMEM = "{v} {r}%";
const char HTTP_FORM_START[] PROGMEM = ";
const char HTTP_FORM_PARAM[] PROGMEM = "
";
const char HTTP_FORM_END[] PROGMEM = "
";
const char HTTP_SCAN_LINK[] PROGMEM = "
";
const char HTTP_SAVED[] PROGMEM = "Credentials Saved
Trying to connect ESP to network.
If it fails reconnect to AP to try again";
const char HTTP_END[] PROGMEM = "";
Root页面效果：
这里包含了多个功能入口
- Configure WiFi、Configure WiFi（No Scan）—— handleWifi
- Info —— handleInfo
- Reset —— handleReset
3.2.2.2 handleWifi —— 配置Wifi信息
用户点击 Configure WiFi、Configure WiFi（No Scan） 就会响应此方法。
函数说明：
/** Wifi config page handler */
/**
* 功能描述：wifi配置页面
* @param scan true or false，是否开启扫描
*/
void WiFiManager::handleWifi(boolean scan) {
String page = FPSTR(HTTP_HEADER);
page.replace("{v}", "Config ESP");
page += FPSTR(HTTP_SCRIPT);
page += FPSTR(HTTP_STYLE);
page += _customHeadElement;
page += FPSTR(HTTP_HEADER_END);
// 判断是否扫描
if (scan) {
// 获取扫描结果
int n = WiFi.scanNetworks();
DEBUG_WM(F("Scan done"));
if (n == 0) {
DEBUG_WM(F("No networks found"));
page += F("No networks found. Refresh to scan again.");
} else {
//sort networks
int indices[n];
for (int i = 0; i < n; i++) {
indices[i] = i;
}
// RSSI SORT
// old sort 排序信号强度，高的放在前面
for (int i = 0; i < n; i++) {
for (int j = i + 1; j < n; j++) {
if (WiFi.RSSI(indices[j]) > WiFi.RSSI(indices[i])) {
std::swap(indices[i], indices[j]);
}
}
}
/*std::sort(indices, indices + n, [](const int & a, const int & b) -> bool
{
return WiFi.RSSI(a) > WiFi.RSSI(b);
});*/
// remove duplicates ( must be RSSI sorted )
// 是否去掉重复的AP
if (_removeDuplicateAPs) {
String cssid;
for (int i = 0; i < n; i++) {
if (indices[i] == -1) continue;
cssid = WiFi.SSID(indices[i]);
for (int j = i + 1; j < n; j++) {
if (cssid == WiFi.SSID(indices[j])) {
DEBUG_WM("DUP AP: " + WiFi.SSID(indices[j]));
indices[j] = -1; // set dup aps to index -1
}
}
}
}
//display networks in page
// 拼接每一个需要显示的ap热点信息
for (int i = 0; i < n; i++) {
if (indices[i] == -1) continue; // skip dups
DEBUG_WM(WiFi.SSID(indices[i]));
DEBUG_WM(WiFi.RSSI(indices[i]));
int quality = getRSSIasQuality(WiFi.RSSI(indices[i]));
// 判断信号强度是否大于我们设置的最小强度
if (_minimumQuality == -1 || _minimumQuality < quality) {
String item = FPSTR(HTTP_ITEM);
String rssiQ;
rssiQ += quality;
item.replace("{v}", WiFi.SSID(indices[i]));
item.replace("{r}", rssiQ);
if (WiFi.encryptionType(indices[i]) != ENC_TYPE_NONE) {
item.replace("{i}", "l");
} else {
item.replace("{i}", "");
}
//DEBUG_WM(item);
page += item;
delay(0);
} else {
DEBUG_WM(F("Skipping due to quality"));
}
}
page += "
";
}
}
page += FPSTR(HTTP_FORM_START);
char parLength[5];
// add the extra parameters to the form
// 添加我们自定义的参数
for (int i = 0; i < _paramsCount; i++) {
if (_params[i] == NULL) {
break;
}
String pitem = FPSTR(HTTP_FORM_PARAM);
if (_params[i]->getID() != NULL) {
pitem.replace("{i}", _params[i]->getID());
pitem.replace("{n}", _params[i]->getID());
pitem.replace("{p}", _params[i]->getPlaceholder());
snprintf(parLength, 5, "%d", _params[i]->getValueLength());
pitem.replace("{l}", parLength);
pitem.replace("{v}", _params[i]->getValue());
pitem.replace("{c}", _params[i]->getCustomHTML());
} else {
pitem = _params[i]->getCustomHTML();
}
page += pitem;
}
if (_params[0] != NULL) {
page += "
";
}
if (_sta_static_ip) {
String item = FPSTR(HTTP_FORM_PARAM);
item.replace("{i}", "ip");
item.replace("{n}", "ip");
item.replace("{p}", "Static IP");
item.replace("{l}", "15");
item.replace("{v}", _sta_static_ip.toString());
page += item;
item = FPSTR(HTTP_FORM_PARAM);
item.replace("{i}", "gw");
item.replace("{n}", "gw");
item.replace("{p}", "Static Gateway");
item.replace("{l}", "15");
item.replace("{v}", _sta_static_gw.toString());
page += item;
item = FPSTR(HTTP_FORM_PARAM);
item.replace("{i}", "sn");
item.replace("{n}", "sn");
item.replace("{p}", "Subnet");
item.replace("{l}", "15");
item.replace("{v}", _sta_static_sn.toString());
page += item;
page += "
";
}
page += FPSTR(HTTP_FORM_END);
page += FPSTR(HTTP_SCAN_LINK);
page += FPSTR(HTTP_END);
server->sendHeader("Content-Length", String(page.length()));
server->send(200, "text/html", page);
DEBUG_WM(F("Sent config page"));
}
注意点：
- _minimumQuality 由 setMinimumSignalQuality 设置
配置页面效果：
上图是启用了scan功能的效果。
上图没有启用scan功能，通常用于隐藏SSID的配置。
关于scan功能，麻烦读者参考 ESP8266开发之旅 网络篇⑤ Scan WiFi——ESP8266WiFiScan库的使用
3.2.2.3 handleWifiSave —— 保存Wifi信息
用户在wifi配置页面点击 save 操作就会响应此方法。
函数说明：
/** Handle the WLAN save form and redirect to WLAN config page again */
/**
* 功能描述：保存wifi设置
*/
void WiFiManager::handleWifiSave() {
DEBUG_WM(F("WiFi save"));
//SAVE/connect here 保存用户设置的ssid和psw
_ssid = server->arg("s").c_str();
_pass = server->arg("p").c_str();
//parameters
// 保存用户设置的自定义参数
for (int i = 0; i < _paramsCount; i++) {
if (_params[i] == NULL) {
break;
}
//read parameter
String value = server->arg(_params[i]->getID()).c_str();
//store it in array
value.toCharArray(_params[i]->_value, _params[i]->_length + 1);
DEBUG_WM(F("Parameter"));
DEBUG_WM(_params[i]->getID());
DEBUG_WM(value);
}
if (server->arg("ip") != "") {
DEBUG_WM(F("static ip"));
DEBUG_WM(server->arg("ip"));
//_sta_static_ip.fromString(server->arg("ip"));
String ip = server->arg("ip");
optionalIPFromString(&_sta_static_ip, ip.c_str());
}
if (server->arg("gw") != "") {
DEBUG_WM(F("static gateway"));
DEBUG_WM(server->arg("gw"));
String gw = server->arg("gw");
optionalIPFromString(&_sta_static_gw, gw.c_str());
}
if (server->arg("sn") != "") {
DEBUG_WM(F("static netmask"));
DEBUG_WM(server->arg("sn"));
String sn = server->arg("sn");
optionalIPFromString(&_sta_static_sn, sn.c_str());
}
// 拼接一个 wifi 保存的页面通知 确保响应了
String page = FPSTR(HTTP_HEADER);
page.replace("{v}", "Credentials Saved");
page += FPSTR(HTTP_SCRIPT);
page += FPSTR(HTTP_STYLE);
page += _customHeadElement;
page += FPSTR(HTTP_HEADER_END);
page += FPSTR(HTTP_SAVED);
page += FPSTR(HTTP_END);
server->sendHeader("Content-Length", String(page.length()));
server->send(200, "text/html", page);
DEBUG_WM(F("Sent wifi save page"));
connect = true; //signal ready to connect/reset
}
页面效果：
3.2.2.4 handleInfo —— 获取ESP的信息
用户在wifi配置页面点击 Info 操作就会响应此方法。
函数说明：
/** Handle the info page */
/**
* 功能描述：展示详情信息
*/
void WiFiManager::handleInfo() {
DEBUG_WM(F("Info"));
String page = FPSTR(HTTP_HEADER);
page.replace("{v}", "Info");
page += FPSTR(HTTP_SCRIPT);
page += FPSTR(HTTP_STYLE);
page += _customHeadElement;
page += FPSTR(HTTP_HEADER_END);
page += F(""
);
// 芯片id
page += F("Chip ID " );
page += ESP.getChipId();
page += F("");
// flash 芯片id
page += F("Flash Chip ID " );
page += ESP.getFlashChipId();
page += F("");
// flash大小
page += F("IDE Flash Size " );
page += ESP.getFlashChipSize();
page += F(" bytes");
page += F("Real Flash Size " );
page += ESP.getFlashChipRealSize();
page += F(" bytes");
page += F("Soft AP IP " );
// AP ip地址
page += WiFi.softAPIP().toString();
page += F("");
page += F("Soft AP MAC " );
// AP mac地址
page += WiFi.softAPmacAddress();
page += F("");
page += F("Station MAC " );
page += WiFi.macAddress();
page += F("");
page += F("");
page += FPSTR(HTTP_END);
server->sendHeader("Content-Length", String(page.length()));
server->send(200, "text/html", page);
DEBUG_WM(F("Sent info page"));
}
页面效果：
3.2.2.5 handleReset —— 重置Wifi模块信息
用户在wifi配置页面点击 Reset 操作就会响应此方法。
函数说明：
/** Handle the reset page */
void WiFiManager::handleReset() {
DEBUG_WM(F("Reset"));
String page = FPSTR(HTTP_HEADER);
page.replace("{v}", "Info");
page += FPSTR(HTTP_SCRIPT);
page += FPSTR(HTTP_STYLE);
page += _customHeadElement;
page += FPSTR(HTTP_HEADER_END);
page += F("Module will reset in a few seconds.");
page += FPSTR(HTTP_END);
server->sendHeader("Content-Length", String(page.length()));
server->send(200, "text/html", page);
DEBUG_WM(F("Sent reset page"));
delay(5000);
// 重置信息
ESP.reset();
delay(2000);
}
页面效果：
4.官方实例操作
使用WifiManager三部曲：
- 引入头文件
#include - 配置具体参数
- 启动WifiManager服务
请读者烧录以下代码：
例子源码：
/**
* 功能：测试WifiManager功能demo
* 作者：单片机菜鸟
* 时间：2019-12-13
* 描述：
* 1.启动wifimanager AP配置页面，通过手机连接esp8266生成的AP热点来进入设置页面
* 2.请在手机浏览器上输入 192.168.4.25
* 2.测试官方方法的使用
*/
#include 这里重点讲解了各个方法的使用，并且通过led灯闪烁来表示工作模式，请读者自行下载烧录体会。没有意外情况的下会有以下控制页面（直接看博主截图说明）：
输入密码后，就可以连接上新wifi。
由于代码中打开了串口调试功能，所以可以看到以下调试信息：
美中不足：
- 对于习惯于中文的初学者来说，肯定是希望可以支持中文；
- 对于爱好潮流的人来说，肯定希望打造自己的web配网页面；
下面就是博主基于wifiManger去打造专属自己的web配网，暂且命名为 CustomWifiManager。此库，博主已经上传到QQ技术交流群。
5.打造专属自己的web配网
5.1 CustomWifiManager —— 站在巨人肩膀上
博主基于WifiManger改造了几个方面，适合简单的样式修改。
5.1.1 setHeadImgBase64 —— 支持自定义ICON头像
函数说明：
void WiFiManager::setHeadImgBase64(String imgBase64) {
_imgBase64= imgBase64;
}
5.1.2 setButtonBackground—— 自定义按钮背景颜色
函数说明：
void WiFiManager::setButtonBackground(const char* backgroundColor){
_backgroundColor= backgroundColor;
}
5.1.3 setButtonTextColor—— 自定义按钮字体颜色
函数说明：
void WiFiManager::setButtonTextColor(const char* textColor) {
_textColor= textColor;
}
5.1.4 setPageTitle—— 自定义页面标题
函数说明：
void WiFiManager::setPageTitle(const char* pageTitle){
_pageTitle = pageTitle;
}
5.2 案例
例子源码：
/**
* 功能：测试WifiManager功能demo
* 作者：单片机菜鸟
* 时间：2019-12-13
* 描述：
* 1.启动wifimanager AP配置页面，通过手机连接esp8266生成的AP热点来进入设置页面
* 2.请在手机浏览器上输入 192.168.4.25
* 3.分别支持大叔黄 萌弟蓝 少女粉
*/
#include 注意：
// 重置保存的修改 目标是为了每次进来都是去掉配置页面
wifiManager.resetSettings();
这行代码是为了每次进来都跑去配网，所以实际使用中需要删除这行
请读者安装好自定义库之后烧录以上代码进行测试，不出意外的话，就是以下页面效果：
- 大叔黄（博主命名请勿喷）
- 萌弟蓝（博主命名请勿喷）
- 少女粉（博主命名请勿喷）
这里，博主仅仅是列举了三个样式，读者可以自行打造专属自己的web配网。但是博主需要提醒读者几个小点：
- icon不宜太复杂太大，建议使用小图标，比如博主从 这里 下载。下载完图标之后需要转成base64，可以通过 图片在线转换 来获取。
- 最好是图标的颜色和button的颜色一样，读者可以通过 传图识色 来获取颜色值。
6.总结
本篇主要是讲解wifimanger的源码解析，并且尝试去打造专属自己的web配网。
如果你觉得本篇对你有帮助，麻烦点赞关注，谢谢支持。本篇内容涵盖了多方面知识，希望读者可以打好基础，多去阅读博主关于esp8266系列的文章，我敢保证肯定收益匪浅。
单片机菜鸟的博客快速索引(快速找到你要的)
如果觉得有用，麻烦点赞收藏，您的支持是博主创作的动力。
共同学习成长QQ群
622368884，不喜勿加，里面有一大群志同道合的探路人