ESP8266-Arduino网络编程实例-Web页面WiFi配置管理

Web页面WiFi配置管理

本文将演示如何通过Web页面来管理ESP8266的WiFi连接。

1、硬件准备

  • ESP8266 NodeMCU开发板一块
  • 数据线一条

2、软件准备

  • Arduino IDE或VSCode + PlatformIO

在前面的文章中，对如何搭建ESP8266开发环境做了详细的介绍，请参考：

ESP8266 NodeMCU的引脚介绍在前面的文章中做了详细的介绍，请参考：

3、代码实现

本次使用到如下开源库：

示例代码如下：

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
#include <WiFiManager.h>
void setup() {
    // 初始化串口
    Serial.begin(115200);
    
    // WiFiManager对象
    WiFiManager wm;

    // 重置配置
    // wm.resetSettings();


    bool res;
    // res = wm.autoConnect(); // auto generated AP name from chipid
    // 匿名
     res = wm.autoConnect("AutoConnectAP"); // anonymous ap
    //res = wm.autoConnect("AutoConnectAP","password"); // password protected ap

    if(!res) {
        Serial.println("Failed to connect");
        // ESP.restart();
    } 
    else {
       
        Serial.println("connected...yeey :)");
    }

}

void loop() {
    
}


运行结果如下：

通过手机或PC连接ESP8266的热点AutoConnectAP，然后在串口中查询ESP8266的热点IP地址：

在这里插入图片描述

然后在浏览器输入PC或手机连接ESP8266的热点分配的IP，可以得到如下页面：

在这里插入图片描述

接着，点击Configure WiFi按钮，进入WiFi配置页面：

在这里插入图片描述

选择需要连接的WiFi，输入密码，点击Save按钮，即可将WiFi信息保存，ESP8266在保存完成后，将自动重启，自动连接配置的WiFi。

WiFiManager库还支持将WiFi配置信息保存到LittleFS和SPIFFS中，示例如下：

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
74
75
76
#include <Arduino.h>
#include <LittleFS.h>
#include <FS.h>

String readFile(fs::FS &fs, const char \* path){
  Serial.printf("Reading file: %s\r\n", path);
  File file = fs.open(path, "r");
  if(!file || file.isDirectory()){
    Serial.println("- empty file or failed to open file");
    return String();
  }
  Serial.println("- read from file:");
  String fileContent;
  while(file.available()){
    fileContent+=String((char)file.read());
  }
  file.close();
  Serial.println(fileContent);
  return fileContent;
}
void writeFile(fs::FS &fs, const char \* path, const char \* message){
  Serial.printf("Writing file: %s\r\n", path);
  File file = fs.open(path, "w");
  if(!file){
    Serial.println("- failed to open file for writing");
    return;
  }
  if(file.print(message)){
    Serial.println("- file written");
  } else {
    Serial.println("- write failed");
  }
  file.close();
}

int data = 4; 

#include <WiFiManager.h>
#define TRIGGER\_PIN 2
int timeout = 120; // seconds to run for

void setup() {
if (!LittleFS.begin()) { //to start littlefs
Serial.println("LittleFS mount failed");
return;
}
data = readFile(LittleFS, "/data.txt").toInt();
WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP 
  // put your setup code here, to run once:
  pinMode(TRIGGER_PIN, INPUT_PULLUP);
  WiFiManager wm;
  //wm.resetSettings();
  bool res;
  res = wm.autoConnect("Setup");
  if(!res) {
     Serial.println("Failed to connect");
     // ESP.restart();
  } 

}

void loop() {
if ( digitalRead(TRIGGER_PIN) == LOW) {
    WiFiManager wm;    
    //wm.resetSettings();
    wm.setConfigPortalTimeout(timeout);
    if (!wm.startConfigPortal("Sharmander")) {
      Serial.println("failed to connect and hit timeout");
      delay(3000);
      ESP.restart();
      delay(5000);
    }
    Serial.println("connected...yeey :)");
}
}

文章来源: https://iotsmart.blog.csdn.net/article/details/127595034