4-1-1将参数添加到WiFiManager设置页面并将其保存到文件中

到目前为止，从 WiFiManager 页面保存的唯一参数是网络的 SSID 和 密码。让我们添加其他参数，例如 MQTT 服务器，端口，用户，密码和主题，并将它们保存到位于 SPIFFS 中的配置文件：

#include <FS.h>
#include <espg266wiFi.h>
#include <pubsubClient.h>
#include <DNSServer.h>
#include <Esp8266WebServer.H>
#include <wiFiManager.h>

定义稍后将用于连接到 MQTT 代理的 CLIENT_ID：

#define CLIENT_ID "ESP_%06X"

在此定义您的默认值;如果 config.json 中存在不同的值，则会覆盖它们：

char mqtt_server[ 40];
char mqtt_port[6] = "1883";
char mqtt_user[32];
char mqtt_pass[32];
char mqtt_topic[64];
char dev_name[50];

如果要再次初始化 ESP，请设置为 true：

boolean clean_g = false;
WiFiClient espClient;
PubSubClient client(espClient);

当ESP8266收到来自MQTT代理的消息时，将触发此功能：

void mqtt_callback(char* topic, byte* payload, unsigned int length) {
  char rxj[512];
  for(inti=0;i<length;i++){
  rxj[i] = payload[i];
  Serial.println(rxj);
  }
}

//用于保存数据的标志
bool saveConfig = false;
//回调通知我们需要保存配置
void saveConfigToFileFn() {
  Serial.println("Should save config");
  SaveConfig = true;
}

这个 setup 函数 正在完成所有工作; 启动 WiFiManager ，将输入的数据保存到 SPIFFS 上的 config.json 文件中，每次 ESP8266 启动时读取文件的内容，并允许您访问所有已保存的数据：

void setup() {
  //将您的设置代码放在这里，运行一次：
  Serial.begin(115200); delay(10);
  sprintf(dev_name, CLIENT_ID, ESP.getChipId());
  if(clean_g)
  {
    Serial.println(F("\n\nWait. . .I am formatting theFLASH!!!"));
    SPIFFS.format();
    Serial.println(F("Done!"));
    WiFi.disconnect(true);
  }

如果 config.json 文件存在，请读取其内容（JSON格式），并将 mqtt 变量设置为其对应的值：

if(SPIFFS.begin()) {
    Serial.println("mounted file system") ;
    if (SPIFFS.exists("/config.json")) {
      //文件存在，读取和加载
      Serial.println("reading config file") ;
      File configFile = SPIFFS.open("/config.json", "r") ;
      if (configFile) {
        Serial.println("opened config file");
        size_t size = configFile.size();
        // 分配缓冲区以存储文件的内容。
        std::unique_ptr<char[]> buf(new char[size]);
        configFile.readBytes(buf.get(), size);
        DynamicJsonBuffer jsonBuffer;
        JsonObject& json = jsonBuffer.parseObject(buf.get());
        json.printTo(Serial);
        if(json.success()) {
          Serial.println("nparsed json") ;
          strcpy(mqtt_server, json["mqtt_server"]);
          strcpy(mqtt_port, json["mqtt_port"]);
          strcpy(mqtt_user, json["mqtt_user"]);
          strcpy(mqtt_pass, json["mqtt_pass"]);
          strcpy(mqtt_topic, json["mqtt_topic"]);
        } else {
          Serial.println("failed to load json config");
        }
      }
    }
  } else {
    Serial.println( " failed to mount FS") ;
  }

将自定义参数添加到 WiFiManager ，以便在用户想要通过 Web 界面设置它们时可用：

WiFiManagerParameter custom_mqtt_server("server", "mqtt_server" ,mqtt_server, 40);
  WiFiManagerParameter custom_mqtt_port("port", "mqtt_port", mqtt_port, 5);
  WiFiManagerParameter custom_mqtt_user("user" ,"mqtt_user" , mqtt_user, 32);
  WiFiManagerParameter custom_mqtt_pass("pass " ,"mqtt_pass" , mqtt_pass, 32);
  WiFiManagerParameter custom_mqtt_topic("topic", "mqtt_topic", mqtt_topic, 64);
  WiFiManager wifiManager;
  wifiManager.setSaveConfigCallback (saveConfigToFileFn);
  wifiManager.addParameter(&custom_mqtt_server);
  wifiManager.addParameter(&custom_mqtt_port);
  wifiManager.addParameter(&custom_mqtt_user);
  wifiManager.addParameter(&custom_mqtt_pass);
  wifiManager.addParameter(&custom_mqtt_topic);
  //使用名称ESP AP启动WiFiManager接入点。
  if(!wifiManager.autoConnect("ESP_AP"))
  {
    Serial.println(F("failed to connect and hit timeout"));
    delay(3000);
    //重置并重试，或者可能让它深度睡眠
    ESP.reset();
    delay(5000);
  }
  Serial.println(F("WiFi is connected now..."));

从网页上读取更新的参数：

  strcpy(mqtt_server, custom_mqtt_server.getValue());
  strcpy(mqtt_port, custom_mqtt_port.getValue());
  strcpy(mqtt_user, custom_mqtt_user.getValue());
  strcpy(mqtt_pass, custom_mqtt_pass.getValue());
  strcpy(mqtt_topic, custom_mqtt_topic.getValue());

现在我们已经从网页接收了所有必要的参数，将它们保存到文件 config.json ，当 ESP28266 启动时会读取该文件：

  if (saveConfig) {
    Serial.println("saving config");
    DynamicJsonBuffer jsonBuffer;
    JsonObject& json = jsonBuffer.createObject();
    json["mqtt_server"] = mqtt_server;
    json["mqtt_port"] = mqtt_port;
    json["mqtt_user"] = mqtt_user;
    json["mqtt_pass"] = mqtt_pass;
    json["mqtt_topic"] = mqtt_topic;
    File configFile = SPIFFS.open( "/config. json", "w");
    if (!configFile) {
      Serial.println(F("failed to open config file for writing"));
    }
    json.printTo(Serial);
    json.printTo(configFile);
    configFile.close();
    //end save
  }

现在 ESP8266 已连接到Wi-Fi网络，唯一剩下的就是使用来自 config.json 文件的凭据连接到 MQTT 代理并订阅主题：

  Serial.println(F("My IP address: "));
  Serial.println(WiFi.localIP());
  //连接到mqtt服务器
  client.setServer(mqtt_server, atoi(mqtt_port));
  client.setCallback(mqtt_callback);
  if(client.connect(dev_name , mqtt_user, mqtt_ pass))
  {
    Serial.println(F("Connected to MQTT broker"));
    Serial.println(F("Subscribe to your mqtt_topic now"));
  }
}
void loop() {
  // put your main code to run in loop client.loop();
}

总之，这就是你可以用 WiFiManager 库做的事情; 创建一个强制门户网站，允许你使用Wi-Fi凭据和自定义参数设置 ESP8266。你可以在任何你希望用户能够使用不同的值配置其 ESP项目中用到这个库