0.引言
所要实现的功能：通过WEB给Blinker配网，效果如下所示。
1.登录页面设置
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
body {
background-color: rgb(0, 0, 0);
}
table {
width: 350px;
height: 400px;
margin: 100px auto;
border-radius: 30px;
background-color: rgb(255, 255, 255);
text-align: center;
}
input {
width: 270px;
height: 45px;
line-height: 45px;
border-radius: 30px;
text-align: center;
background-color: rgb(232, 248, 255);
border: rgb(255, 255, 255);
}
span input {
width: 130px;
height: 40px;
color: #fff;
line-height: 40px;
background-color: rgb(103, 124, 333);
}
</style>
</head>
<body>
<table>
<tr>
<td>
<form name='input' method='post'>
<font size='5'><b>MPPT电源控制器</b></font><br>
<hr align='center' width='270px' size='2px'><br>
<input type='text' name='ssid' placeholder='请输入wifi名称'><br><br>
<input type='text' name='password' placeholder='请输入wifi密码'><br><br>
<input type='text' name='key' placeholder='请输入Blinker密钥'><br><br>
<span>
<input type='reset' value='重置'>
<input type='submit' value='连接'>
</span>
</form>
</td>
</tr>
</table>
</body>
</html>2.HTML格式调整
注意：把双引号改为单引号，不能有空行，把空行去掉。
<!DOCTYPE html>\r\n\
<html lang='en'>\r\n\
<head>\r\n\
<meta charset='UTF-8'>\r\n\
<meta name='viewport' content='width=device-width, initial-scale=1.0'>\r\n\
<title>Document</title>\r\n\
<style>\r\n\
body {\r\n\
background-color: rgb(0, 0, 0);\r\n\
}\r\n\
table {\r\n\
width: 350px;\r\n\
height: 400px;\r\n\
margin: 100px auto;\r\n\
border-radius: 30px;\r\n\
background-color: rgb(255, 255, 255);\r\n\
text-align: center;\r\n\
}\r\n\
input {\r\n\
width: 270px;\r\n\
height: 45px;\r\n\
line-height: 45px;\r\n\
border-radius: 30px;\r\n\
text-align: center;\r\n\
background-color: rgb(232, 248, 255);\r\n\
border: rgb(255, 255, 255);\r\n\
}\r\n\
span input {\r\n\
width: 130px;\r\n\
height: 40px;\r\n\
color: #fff;\r\n\
line-height: 40px;\r\n\
background-color: rgb(103, 124, 333);\r\n\
}\r\n\
</style>\r\n\
</head>\r\n\
<body>\r\n\
<table>\r\n\
<tr>\r\n\
<td>\r\n\
<form name='input' method='post'>\r\n\
<font size='5'><b>MPPT电源控制器</b></font><br>\r\n\
<hr align='center' width='270px' size='2px'><br>\r\n\
<input type='text' name='ssid' placeholder='请输入wifi名称'><br><br>\r\n\
<input type='text' name='password' placeholder='请输入wifi密码'><br><br>\r\n\
<input type='text' name='key' placeholder='请输入Blinker密钥'><br><br>\r\n\
<span>\r\n\
<input type='reset' value='重置'>\r\n\
<input type='submit' value='连接'>\r\n\
</span>\r\n\
</form>\r\n\
</td>\r\n\
</tr>\r\n\
</table>\r\n\
</body>\r\n\
</html>\r\n\3.WEB配网
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
const char* AP_NAME = "配网WIFI";//wifi名字
//暂时存储wifi账号密码
char sta_ssid[32] = {0};
char sta_password[64] = {0};
//配网页面代码
const char* page_html = "\
<!DOCTYPE html>\r\n\
<html lang='en'>\r\n\
<head>\r\n\
<meta charset='UTF-8'>\r\n\
<meta name='viewport' content='width=device-width, initial-scale=1.0'>\r\n\
<title>Document</title>\r\n\
</head>\r\n\
<body>\r\n\
<form name='input' action='/' method='POST'>\r\n\
wifi名称: <br>\r\n\
<input type='text' name='ssid'><br>\r\n\
wifi密码:<br>\r\n\
<input type='text' name='password'><br>\r\n\
<input type='submit' value='保存'>\r\n\
</form>\r\n\
</body>\r\n\
</html>\r\n\
";
const byte DNS_PORT = 53;//DNS端口号
IPAddress apIP(192, 168, 4, 1);//esp8266-AP-IP地址
DNSServer dnsServer;//创建dnsServer实例
ESP8266WebServer server(80);//创建WebServer
void handleRoot() {//访问主页回调函数
server.send(200, "text/html", page_html);
}
void handleRootPost() {//Post回调函数
Serial.println("handleRootPost");
if (server.hasArg("ssid")) {//判断是否有账号参数
Serial.print("got ssid:");
strcpy(sta_ssid, server.arg("ssid").c_str());//将账号参数拷贝到sta_ssid中
Serial.println(sta_ssid);
} else {//没有参数
Serial.println("error, not found ssid");
server.send(200, "text/html", "<meta charset='UTF-8'>error, not found ssid");//返回错误页面
return;
}
//密码与账号同理
if (server.hasArg("password")) {
Serial.print("got password:");
strcpy(sta_password, server.arg("password").c_str());
Serial.println(sta_password);
} else {
Serial.println("error, not found password");
server.send(200, "text/html", "<meta charset='UTF-8'>error, not found password");
return;
}
server.send(200, "text/html", "<meta charset='UTF-8'>保存成功");//返回保存成功页面
delay(2000);
//连接wifi
connectNewWifi();
}
void initBasic(void){//初始化基础
Serial.begin(115200);
WiFi.hostname("Smart-ESP8266");//设置ESP8266设备名
}
void initSoftAP(void){//初始化AP模式
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
if(WiFi.softAP(AP_NAME)){
Serial.println("ESP8266 SoftAP is right");
}
}
void initWebServer(void){//初始化WebServer
//server.on("/",handleRoot);
//上面那行必须以下面这种格式去写否则无法强制门户
server.on("/", HTTP_GET, handleRoot);//设置主页回调函数
server.onNotFound(handleRoot);//设置无法响应的http请求的回调函数
server.on("/", HTTP_POST, handleRootPost);//设置Post请求回调函数
server.begin();//启动WebServer
Serial.println("WebServer started!");
}
void initDNS(void){//初始化DNS服务器
if(dnsServer.start(DNS_PORT, "*", apIP)){//判断将所有地址映射到esp8266的ip上是否成功
Serial.println("start dnsserver success.");
}
else Serial.println("start dnsserver failed.");
}
void connectNewWifi(void){
WiFi.mode(WIFI_STA);//切换为STA模式
WiFi.setAutoConnect(true);//设置自动连接
WiFi.begin(sta_ssid,sta_password);//连接上一次连接成功的wifi
Serial.println("");
Serial.print("Connect to wifi");
int count = 0;
while (WiFi.status() != WL_CONNECTED) {
delay(1500);
count++;
if(count > 10){//如果5秒内没有连上，就开启Web配网 可适当调整这个时间
initSoftAP();
initWebServer();
initDNS();
break;//跳出 防止无限初始化
}
Serial.print(".");
}
Serial.println("");
if(WiFi.status() == WL_CONNECTED){//如果连接上 就输出IP信息 防止未连接上break后会误输出
Serial.println("WIFI Connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());//打印esp8266的IP地址
server.stop();
}
}
void setup() {
initBasic();
connectNewWifi();
}
void loop() {
server.handleClient();
dnsServer.processNextRequest();
}