ESP32通过WEB页面连接WIFI -

标题: ESP32通过WEB页面连接WIFI [打印本页]

作者: lw1997 时间: 2019-8-19 13:30
标题: ESP32通过WEB页面连接WIFI
在ESP32官方的例程中，都是直接把WIFI的SSID和Password写死在程序里，但是在实际使用中网络环境是不固定的，如果更换了网络环境，就得重新修改程序，在实际运用中并不合理。我在网上找了很久也没找到类似的例程，于是便自己试着写了一个，我的思路如下：

首次上电会有一个ESP32发出的WIFI，手机连接这个WIFI，然后访问esp32的IP地址就会出现WIFI配置的网页：

直接贴上代码：

      #include <WiFi.h>

      #include <ESPmDNS.h>

      #include <WebServer.h>

      #include <WiFiMulti.h>

      const char* AP_SSID  = "ESP32_Config"; //热点名称

      const char* AP_PASS  = "12345678";  //密码

      #define ROOT_HTML  "<!DOCTYPE html><html><head><title>WIFI Config by lwang</title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><style type=\"text/css\">.input{display: block; margin-top: 10px;}.input span{width: 100px; float: left; float: left; height: 36px; line-height: 36px;}.input input{height: 30px;width: 200px;}.btn{width: 120px; height: 35px; background-color: #000000; border:0px; color:#ffffff; margin-top:15px; margin-left:100px;}</style><body><form method=\"GET\" action=\"connect\"><label class=\"input\"><span>WiFi SSID</span><input type=\"text\" name=\"ssid\"></label><label class=\"input\"><span>WiFi PASS</span><input type=\"text\"  name=\"pass\"></label><input class=\"btn\" type=\"submit\" name=\"submit\" value=\"Submie\"></form></body></html>"

      WebServer server(80);

      WiFiMulti wifiMulti;

      uint8_t resr_count_down = 120;//重启倒计时s

      TimerHandle_t xTimer_rest;

      void restCallback(TimerHandle_t xTimer );

      void setup() {

      Serial.begin(115200);

      WiFi.mode(WIFI_AP);//配置为AP模式

      boolean result = WiFi.softAP(AP_SSID, AP_PASS);//开启WIFI热点

      if (result)

      {

         IPAddress myIP = WiFi.softAPIP();

         //打印相关信息

         Serial.println("");

         Serial.print("Soft-AP IP address = ");

         Serial.println(myIP);

         Serial.println(String("MAC address = ")  + WiFi.softAPmacAddress().c_str());

         Serial.println("waiting ...");

         xTimer_rest = xTimerCreate("xTimer_rest", 1000 / portTICK_PERIOD_MS, pdTRUE, ( void * ) 0, restCallback);

         xTimerStart( xTimer_rest, 0 );  //开启定时器

      } else {  //开启热点失败

         Serial.println("WiFiAP Failed");

         delay(3000);

         ESP.restart();  //复位esp32

      }

      if (MDNS.begin("esp32")) {

         Serial.println("MDNS responder started");

      }

      //首页

      server.on("/", []() {

         server.send(200, "text/html", ROOT_HTML);

      });

      //连接

      server.on("/connect", []() {

         server.send(200, "text/html", "<html><body><h1>successd,conning...</h1></body></html>");

         WiFi.softAPdisconnect(true);

         //获取输入的WIFI账户和密码

         String ssid = server.arg("ssid");

         String pass = server.arg("pass");

         Serial.println("WiFi Connect SSID:" + ssid + "  PASS:" + pass);

         //设置为STA模式并连接WIFI

         WiFi.mode(WIFI_STA);

         WiFi.begin(ssid.c_str(), pass.c_str());

         resr_count_down = 120;

         xTimerStop(xTimer_rest, 0);

         uint8_t Connect_time = 0; //用于连接计时，如果长时间连接不成功，复位设备

         while (WiFi.status() != WL_CONNECTED) {  //等待WIFI连接成功

            delay(500);

            Serial.print(".");

            Connect_time ++;

            if (Connect_time > 80) {  //长时间连接不上，复位设备

            Serial.println("Connection timeout, check input is correct or try again later!");

            delay(3000);

            ESP.restart();

            }

         }

      });

      server.begin();

      }

      void loop() {

      server.handleClient();

      while (WiFi.status() == WL_CONNECTED) {

         //WIFI已连接

      }

      }

      void restCallback(TimerHandle_t xTimer ) {  //长时间不访问WIFI Config 将复位设备

      resr_count_down --;

      Serial.print("resr_count_down: ");

      Serial.println(resr_count_down);

      if (resr_count_down < 1) {

         ESP.restart();

      }

      }

程序下载：https://github.com/lwang1997/ESP32/tree/master/WIFI_Config

在测试时发现有时候访问不了，所以加了定时，如果没有连接WiFi，两分钟重启一次，避免一直访问不了。程序写的不是很好，但是能实现我想要的功能。

作者: jemery1030 时间: 2019-10-18 09:23
感謝分享

作者: mike1973 时间: 2019-10-26 20:45
好東西實用

作者: JohnSmith233 时间: 2020-4-3 11:22
求助，我找不到WebServer.h，WiFiMulti.h这两个库，求大佬帮忙

作者: tedabc 时间: 2021-1-22 11:34
楼主你这个代码可以连wifi 但是不能保存每次得重连呢

欢迎光临 (http://www.51hei.com/bbs/)