• 【ESP32_8266_WiFi (十三)】ESP8266自动配网 – WiFiManager库使用说明

    文章目录

    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 <ESP8266WiFi.h>          
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>         
 
void setup() {
  Serial.begin(9600);       
  // 建立WiFiManager对象
  WiFiManager wifiManager;
  
  // 清除ESP8266所存储的WiFi连接信息以便测试WiFiManager工作效果
  wifiManager.resetSettings();
  Serial.println("ESP8266 WiFi Settings Cleared");
}
 
void loop() {}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    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
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    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 <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
         
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h> 
 
// 测试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();
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    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          = "{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       = "
    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             = "
    "    ;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

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

    const char HTTP_PORTAL_OPTIONS[] PROGMEM  = "<form action=\"/wifi\" method=\"get\"><button>配置WiFi</button></form><br/><form action=\"/0wifi\" method=\"get\"><button>配置W

    • 1

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


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

  • 相关阅读:
    第七章 网络安全 | 计算机网络（谢希仁 第八版）
    linux环境下的nc（ncat的简写）命令用法和udp端口检测
    【最新计算机毕业设计】JAVA基于微信小程序的英语学习激励系统
    Zookeeper深入进阶
    轻松管理项目依赖：深入了解SBT的依赖管理功能
    使用VisualStudio2022制作安装包
    2022年8月中国数据库排行榜：openGauss重夺榜眼，PolarDB反超人大金仓
    [数据结构] 二叉树--堆
    el-tree目录和el-table实现搜索定位高亮方法
    设有一个由正整数组成的无序单链表，编写完成一以下功能的算法
  • 原文地址：https://blog.csdn.net/K3169/article/details/127893387