文章目录

• ESP8266自动配网 – WiFiManager库使用说明
• • 1 WiFiManager库使用说明
  • • 1.1 WiFi配置流程
    • 1.2 WiFi配置示例程序
    • • 1.2.1 预备程序 – 清理ESP8266储存的WiFi连接信息
      • 1.2.2 WiFiManager网络配置示例程序
      • 1.2.3 WiFiManager网络配置测试
  • 2 WiFiManager库汉化和定制说明
  • • 2.1 WiFiManager库的汉化说明
    • • 2.2 定制修改WiFiManager库的WiFi设置页面

ESP8266自动配网 – WiFiManager库使用说明

在我们开发物联网项目时，经常需要为ESP8266设置WiFi。在以往的课程内容里，我们的设置WiFi的方法是通过修改程序中的内容来实现的。

但是假如我们做好了物联网制作后送给朋友，而朋友不知道如何写ESP8266程序.这种情况下该如何来让不懂编程的朋友也能设置ESP8266的WiFi连接呢？

我们可以利用一款非常好用的ESP8266第三方库：WiFiManager库。以下是该库的基本信息：
作者：tzapu,tablatronix
GitHub：https://github.com/tzapu/WiFiManager
网盘下载：https://lanzoui.com/ibBlTe9jaif
太极创客汉化版：https://github.com/taichi-maker/WiFiManager

1 WiFiManager库使用说明

1.1 WiFi配置流程

1.2 WiFi配置示例程序

1.2.1 预备程序 – 清理ESP8266储存的WiFi连接信息

ESP8266的WiFi设置是储存在它的闪存系统中的。因此在启动ESP8266并连接WiFi时，它都会尝试使用闪存系统中储存的信息来进行WiFi连接。

在开始讲解如何使用WiFiManager库来配置ESP8266的WiFi设置前，我们需要首先清除ESP8266的WiFi连接信息，这样才能看到WiFiManager库的工作效果。（如果ESP8266刚一启动就自动成功连接WiFi了，那么WiFiManager库是不会发挥作用的。）

我们可以使用以下示例程序清除ESP8266的闪存中所存储的WiFi连接信息。

在此程序的第27行位置，使用了wifiManager.resetSettings()来实现清除ESP8266的闪存中所存储的WiFi连接信息这一操作。

/**********************************************************************
项目名称/Project          : 零基础入门学用物联网
程序名称/Program name     : a0_reset
团队/Team                : 太极创客团队 / Taichi-Maker (www.taichi-maker.com)
作者/Author              : CYNO朔
日期/Date（YYYYMMDD）     : 20200703
程序目的/Purpose          : 
清除ESP8266的闪存中所存储的WiFi连接信息。如需获取本示例程序的详细说明，请前往以下链接：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-c/esp8266-tips/wifimanager/
-----------------------------------------------------------------------
其它说明 / Other Description：
本程序为太极创客团队制作的免费视频教程《零基础入门学用物联网 》中一部分。该教程系统的
向您讲述ESP8266的物联网应用相关的软件和硬件知识。以下是该教程目录页：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/                    
***********************************************************************/
#include           
#include 
#include 
#include          void setup() {Serial.begin(9600);       // 建立WiFiManager对象WiFiManager wifiManager;// 清除ESP8266所存储的WiFi连接信息以便测试WiFiManager工作效果wifiManager.resetSettings();Serial.println("ESP8266 WiFi Settings Cleared");
}void loop() {}

1.2.2 WiFiManager网络配置示例程序

以下示例程序使用了WiFiManager来实现WiFi网络配置。

/**********************************************************************
项目名称/Project          : 零基础入门学用物联网
程序名称/Program name     : a_basic
团队/Team                : 太极创客团队 / Taichi-Maker (www.taichi-maker.com)
作者/Author              : CYNO朔
日期/Date（YYYYMMDD）     : 20200703
程序目的/Purpose          : 
利用WiFiManager库实现最基本的WiFi配置工作
如需获取本示例程序的详细说明，请前往以下链接：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-c/esp8266-tips/wifimanager/
-----------------------------------------------------------------------
其它说明 / Other Description：
本程序为太极创客团队制作的免费视频教程《零基础入门学用物联网 》中一部分。该教程系统的
向您讲述ESP8266的物联网应用相关的软件和硬件知识。以下是该教程目录页：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/                    
***********************************************************************/
#include           
#include 
#include 
#include          void setup() {Serial.begin(9600);       // 建立WiFiManager对象WiFiManager wifiManager;// 自动连接WiFi。以下语句的参数是连接ESP8266时的WiFi名称wifiManager.autoConnect("AutoConnectAP");// 如果您希望该WiFi添加密码，可以使用以下语句：// wifiManager.autoConnect("AutoConnectAP", "12345678");// 以上语句中的12345678是连接AutoConnectAP的密码// WiFi连接成功后将通过串口监视器输出连接成功信息 Serial.println(""); Serial.print("ESP8266 Connected to ");Serial.println(WiFi.SSID());              // WiFi名称Serial.print("IP address:\t");Serial.println(WiFi.localIP());           // IP
}void loop() {}

1.2.3 WiFiManager网络配置测试

/**********************************************************************
项目名称/Project          : 零基础入门学用物联网
程序名称/Program name     : b_2_wifimanger_example
团队/Team                : 太极创客团队 / Taichi-Maker (www.taichi-maker.com)
作者/Author              : CYNO朔
日期/Date（YYYYMMDD）     : 2020703
程序目的/Purpose          :
测试WiFiManager库所配置的ESP8266的确可以连接到互联网，并从互联网上的网络服务器获取信息。
如需获取本示例程序的详细说明，请前往以下链接：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-c/esp8266-tips/wifimanager/
-----------------------------------------------------------------------
其它说明 / Other Description：
本程序为太极创客团队制作的免费视频教程《零基础入门学用物联网 》中一部分。该教程系统的
向您讲述ESP8266的物联网应用相关的软件和硬件知识。以下是该教程目录页：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/     
***********************************************************************/
#include 
#include #include 
#include 
#include  // 测试HTTP请求用的URL。注意网址前面必须添加"http://"
#define URL "http://www.example.com"void setup() {//初始化串口设置Serial.begin(9600);// 建立WiFiManager对象WiFiManager wifiManager;// 自动连接WiFi。以下语句的参数是连接ESP8266时的WiFi名称wifiManager.autoConnect("AutoConnectAP");Serial.print("WiFi Connected!");httpClientRequest();  
}void loop() {}// 发送HTTP请求并且将服务器响应通过串口输出
void httpClientRequest(){//重点1 创建 HTTPClient 对象HTTPClient httpClient;//重点2 通过begin函数配置请求地址。此处也可以不使用端口号和PATH而单纯的httpClient.begin(URL); Serial.print("URL: "); Serial.println(URL);//重点3 通过GET函数启动连接并发送HTTP请求int httpCode = httpClient.GET();Serial.print("Send GET request to URL: ");Serial.println(URL);//重点4. 如果服务器响应HTTP_CODE_OK(200)则从服务器获取响应体信息并通过串口输出//如果服务器不响应HTTP_CODE_OK(200)则将服务器响应状态码通过串口输出if (httpCode == HTTP_CODE_OK) {// 使用getString函数获取服务器响应体内容String responsePayload = httpClient.getString();Serial.println("Server Response Payload: ");Serial.println(responsePayload);} else {Serial.println("Server Respose Code：");Serial.println(httpCode);}//重点5. 关闭ESP8266与服务器连接httpClient.end();
}

2 WiFiManager库汉化和定制说明

2.1 WiFiManager库的汉化说明

WiFiManager库的WiFi设置页面是英文的，假如您想要使用此汉化后的WiFiManager库，可以通过以下链接进行下载：

WiFiManager库（太极创客汉化版）：https://github.com/taichi-maker/WiFiManager

以下是WiFiManager库汉化后的界面效果：

2.2 定制修改WiFiManager库的WiFi设置页面

假如您想要自己定制WiFiManager库的WiFi设置页面，可以修改库文件中的“WiFiManager.h”。该文件开始部分，有一系列字符串数组，如下所示：

const char HTTP_HEADER[] PROGMEM          = "";
const char HTTP_STYLE[] PROGMEM           = "";
const char HTTP_SCRIPT[] PROGMEM          = "";
const char HTTP_HEADER_END[] PROGMEM        = "
";
const char HTTP_PORTAL_OPTIONS[] PROGMEM  = "
Configure WiFi

Configure WiFi (No Scan)

Info

Reset
";
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        = "
save
";
const char HTTP_SCAN_LINK[] PROGMEM       = "
Scan
";
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             = "
";

以上这一系列文字信息定义了WiFi配置页面的内容。通过调整以上内容，我们可以修改Wifi配置页面的外观样式和信息。举例来说，假如您希望修改连接页面的按钮文字，那么可以将以上程序中const char HTTP_PORTAL_OPTIONS[]修改为以下内容：

const char HTTP_PORTAL_OPTIONS[] PROGMEM  = "
配置WiFi

配置W

这一修改将会把WiFi配置页面的按键内容改为中文。也就是在这届内容前面部分您所看到的WiFi配置页面效果。

内容来自 -----> 太极创客
详情可见太极创客官网，内有Arduino、ESP32等详细教程
http://www.taichi-maker.com