[ESP8266] 通过 html 配网_arduino eps8266 ap模式下在html页面进行wifi密码设置

作者：我家小花儿 | 2024-02-29 03:47:26

踩

arduino eps8266 ap模式下在html页面进行wifi密码设置

ESP8266_html_Config

思路：
代码
- 1. html
- 2.esp代码
说明
目前缺点：

思路：

esp8266设置为AP模式
用户连接AP发出的网络，访问ESP8266服务器，ESP8266返回html页面
用户载html填写相关信息，通过TCP/TP将信息以请求的方式发送给esp8266
esp8266 接收到请求，对请求数据进行获取，得到所需信息

代码

1. html

<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>
            不知名up的ESP8266网页配网
        </title>
    </head>

    <body>
        <form name="my">
            WiFi名称：
            <input type="text" name="s" placeholder="请输入您WiFi的名称" id="aa">
            <br>
            WiFi密码：
            <input type="text" name="p" placeholder="请输入您WiFi的密码" id="bb">
            <br>
            <input type="button" value="连接" onclick="wifi()">
        </form>
        <script language="javascript">
            function wifi() {
                var ssid = my.s.value;
                var password = bb.value;
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", "/HandleVal?ssid=" + ssid + "&password=" + password, true);
                xmlhttp.send()
            }
        </script>
    </body>

</html>
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

2.esp代码

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

const char* ssid = "你设置wifi名称";
const char* pd= "你的密码";//密码大于8位

ESP8266WebServer server(80); //服务器端口
String str=
"<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><meta name=\"viewport\"content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\"content=\"ie=edge\"><title>不知名up的ESP8266网页配网</title></head><body><form name=\"my\">WiFi名称：<input type=\"text\"name=\"s\"placeholder=\"请输入您WiFi的名称\"id=\"aa\"><br>WiFi密码：<input type=\"text\"name=\"p\"placeholder=\"请输入您WiFi的密码\"id=\"bb\"><br><input type=\"button\"value=\"连接\"οnclick=\"wifi()\"></form><script language=\"javascript\">function wifi(){var ssid=my.s.value;var password=bb.value;var xmlhttp=new XMLHttpRequest();xmlhttp.open(\"GET\",\"/HandleVal?ssid=\"+ssid+\"&password=\"+password,true);xmlhttp.send()}</script></body></html>";

/*****************************************************
 * 函数名称：handleRoot()
 * 函数说明：客户端请求根函数的回调函数
 * 参数说明：无
******************************************************/
void handleRoot(){
  server.send(200,"text/html",str);
}

void HandleVal()
{
    String wifis = server.arg("ssid");
    String wifip = server.arg("password");
    Serial.println(wifis); Serial.println(wifip);
    WiFi.begin(wifis,wifip);


}
/*****************************************************
 * 函数名称：autoConfig()
 * 函数说明：自动连接WiFi函数
 * 参数说明：无
 * 返回值说明:true：连接成功 false：连接失败
******************************************************/
bool autoConfig()
{
  WiFi.mode(WIFI_STA); //设置为STA模式
  WiFi.begin(); // 开始连接wifi
  Serial.print("AutoConfig Waiting......");
  for (int i = 0; i < 20; i++)
  {
    if (WiFi.status() == WL_CONNECTED)
    {
      Serial.println("AutoConfig Success");
      Serial.printf("SSID:%s\r\n", WiFi.SSID().c_str());
      Serial.printf("PSW:%s\r\n", WiFi.psk().c_str());
      WiFi.printDiag(Serial);
      return true;
      //连接成功
    }
    else {
      Serial.print(".");
    }
  }
  Serial.println("AutoConfig Faild!" );
  return false;
  //自动连接失败
}
/*****************************************************
 * 函数名称：handleNotFound()
 * 函数说明：响应失败函数
 * 参数说明：无
******************************************************/
void handleNotFound() {
  digitalWrite(LED_BUILTIN, 0);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  digitalWrite(LED_BUILTIN, 1);
}

/*****************************************************
 * 函数名称：htmlConfig()
 * 函数说明：通过html网页配置网络
 * 参数说明：无
 * 返回值说明:无
******************************************************/
void htmlConfig(){
  WiFi.mode(WIFI_AP_STA);
 WiFi.softAP(ssid, password); //AP模式下初始化wifi的账号和密码
    Serial.println("AP设置完成");

    IPAddress myIP = WiFi.softAPIP(); // 服务器IP
    Serial.print("AP IP address: ");
    Serial.println(myIP);

    if (MDNS.begin("esp8266")) {
      Serial.println("MDNS responder started");
    }

    server.on("/", handleRoot); //当访问服务器的根目标时候，执行handleroot
    server.on("/HandleVal", HTTP_GET, HandleVal);
    server.onNotFound(handleNotFound);//请求失败回调函数

    server.begin();//开启服务器
    Serial.println("HTTP server started");
    while(1)
    {
        server.handleClient();
        MDNS.update();
        if (WiFi.status() == WL_CONNECTED)
        {
            Serial.println("HtmlConfig Success");
            Serial.printf("SSID:%s\r\n", WiFi.SSID().c_str());
            Serial.printf("PSW:%s\r\n", WiFi.psk().c_str());
            Serial.println("HTML连接成功");
            server.close();
            break;
        }
    }

}
void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  Serial.println("ready~~~~");
  bool wifiConfig = autoConfig();
  if(wifiConfig == false){
    htmlConfig();
  }
}

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

说明

在这里插入图片描述

目前缺点：

html网页过于简陋，wifi名称需要自己手动输入，很不方便
连接wifi后账号和密码没有保存，当esp复位之后，还需要重新设置，很麻烦。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/163558

[ESP8266] 通过 html 配网_arduino eps8266 ap模式下在html页面进行wifi密码设置

ESP8266_html_Config

思路：

代码

1. html

2.esp代码

说明

目前缺点：

HTML 颜色名