ESP8266 AP网页配网
时间: 2024-12-27 19:20:07 浏览: 5
### 实现ESP8266作为接入点进行网页配置Wi-Fi连接
#### ESP8266 AP模式简介
ESP8266可以被配置成接入点(Access Point, AP),使得其他设备能够通过浏览器访问其内置Web服务器来完成Wi-Fi设置。这种方式非常适合于首次配置或当设备无法预先知道可用的Wi-Fi网络时使用。
#### Web页面用于配置Wi-Fi连接
为了使用户可以通过浏览器界面输入SSID和密码,需要创建一个简单的HTML表单,并将其托管在一个轻量级HTTP服务器上运行在ESP8266内部。一旦提交了这些信息,则会保存到闪存并尝试建立新的Wi-Fi连接[^2]。
```html
<!DOCTYPE html>
<html>
<head>
<title>Configure WiFi</title>
</head>
<body>
<h1>Connect to WiFi Network</h1>
<form action="/save">
SSID:<br><input type="text" name="ssid"><br>
Password:<br><input type="password" name="pass"><br><br>
<input type="submit" value="Save & Connect">
</form>
</body>
</html>
```
#### Arduino IDE中的ESP8266代码示例
下面是一个完整的Arduino草图例子,展示了如何让ESP8266进入AP模式并向用户提供上述HTML页面以供他们填写必要的细节:
```cpp
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "ESP8266-Config";
const char* password = "";
IPAddress apIP(192, 168, 4, 1);
ESP8266WebServer server(80);
void setup() {
Serial.begin(115200);
// 设置为仅AP模式
WiFi.softAP(ssid, password);
delay(100);
// 配置静态IP地址给AP接口
WiFi.softAPIP(apIP);
// 启动web服务端口监听
server.on("/", [](){
String htmlPage;
htmlPage += "<!DOCTYPE html>";
htmlPage += "<html>";
htmlPage += "<head>";
htmlPage += "<title>Configure WiFi</title>";
htmlPage += "</head>";
htmlPage += "<body>";
htmlPage += "<h1>Connect to WiFi Network</h1>";
htmlPage += "<form action=\"/save\">";
htmlPage += " SSID:<br><input type=\"text\" name=\"ssid\"><br>";
htmlPage += " Password:<br><input type=\"password\" name=\"pass\"><br><br>";
htmlPage += " <input type=\"submit\" value=\"Save & Connect\">";
htmlPage += "</form>";
htmlPage += "</body>";
htmlPage += "</html>";
server.send(200, "text/html", htmlPage);
});
server.on("/save", [](){
if (server.hasArg("ssid") && server.hasArg("pass")) {
const String newSsid = server.arg("ssid");
const String newPassword = server.arg("pass");
// Save the credentials and attempt connection here...
Serial.println("New SSID: ");
Serial.println(newSsid);
Serial.println("New PASSWORD:");
Serial.println(newPassword);
// Redirect back after saving.
server.sendHeader("Location","/");
server.send(303);
} else {
server.send(400, "text/plain", "Bad Request");
}
});
server.begin();
}
void loop() {
server.handleClient();
}
```
这段代码实现了基本的功能需求:启动了一个名为`ESP8266-Config`的开放型热点;每当有客户端请求根路径(`"/"`)时返回包含表单的HTML文档;而当收到POST请求至`"/save"`则解析传入的数据并将它们打印出来以便进一步处理[^4]。
阅读全文