admin管理员组文章数量:1530913
一个很简单的小操作，每逢家里有客人来访，总是需要到处询问WiFi密码。i人对此十分抗拒，刚好最近在学习ESP8266，想到了可以利用ESP8266广播WiFi信息，只要来客连接了ESP8266的WiFi，手机或者其他电子设备就会自动的跳转到浏览器，也就可以查看到家里的WiFi密码了。
这个小操作也可以提升你的逼格~
目录
所需设备：一块Node Mcu开发板即可
实现原理
代码部分：
使用方法：
所需设备：一块Node Mcu开发板即可
PS：这块开发板可以通过数据线烧录代码，arduino开发非常简便。
实现原理
ESP8266自身以AP模式工作，提供开放WiFi。并且ESP8266作为一个服务器，扮演两个角色，第一个是DNS服务器。第二个是网络服务器，也就是响应客户端的HTTP访问请求。
代码部分：
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <Arduino.h>
const char* AP_NAME = "连接此WiFi查看可用WiFi";//wifi名字
//配网页面代码
const char* page_html = "\
<!DOCTYPE html>\r\n\
<!DOCTYPE html>\r\n\
<html lang='en'>\r\n\
<head>\r\n\
<meta charset='UTF-8'>\r\n\
<meta http-equiv='X-UA-Compatible' content='IE=edge'>\r\n\
<meta name='viewport' content='width=device-width, initial-scale=1.0'>\r\n\
<title>WIFI列表</title>\r\n\
<style type='text/css'>\r\n\
body {background-color:aqua;}\r\n\
p {color:blue;}\r\n\
</style>\r\n\
</head>\r\n\
<body>\r\n\
<div style=' text-align: center;'>\r\n\
<h1>WIFI列表如下</h1>\r\n\
<p>请各位来宾根据wifi信号强度自行连接,复制密码自行连接即可</p>\r\n\
<p>若对wifi连接存在困惑,请向家里人询问,我们乐于帮您解决。</p>\r\n\
</div>\r\n\
<div style=' text-align: center;'>\r\n\
<p>WiFi①:MERCURY_B9BD</p>\r\n\
<p>密码:5601518rxs@</p>\r\n\
</div>\r\n\
<div style=' text-align: center;'>\r\n\
<p>WiFi②:Tenda_4E0C70</p>\r\n\
<p>密码:r5601518</p>\r\n\
</div>\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 initBasic(void){//初始化基础
Serial.begin(9600);
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.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 setup() {
initBasic();
initSoftAP();
initWebServer();
initDNS();
}
void loop() {
server.handleClient();
dnsServer.processNextRequest();
}附带html网页制作部分，会网页制作的同学可以自己动手写一个网页 ~
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>WIFI列表</title>
<style type='text/css'>
body {background-color:aqua;}
p {color:blue;}
</style>
</head>
<body>
<div style=' text-align: center;'>
<h1>WIFI列表如下</h1>
<p>请各位来宾根据wifi信号强度自行连接,复制密码自行连接即可</p>
<p>若对wifi连接存在困惑,请向家里人询问,我们乐于帮您解决。</p>
</div>
<div style=' text-align: center;'>
<p>WiFi①:MERCURY_B9BD</p>
<p>密码:5601518rxs@</p>
</div>
<div style=' text-align: center;'>
<p>WiFi②:Tenda_4E0C70</p>
<p>密码:r5601518</p>
</div>
</body>
</html>使用方法：
将上述代码烧录至Node Mcu后，修改一下下图部分，将wifi信息修改为自己家的wifi信息即可。
最后若是要添加多个WiFi，那么只要添加或者删除<div> </div>块的个数即可。
效果图：
版权声明：本文标题：过年装逼小技能-ESP8266实现连接WiFi自动跳出浏览器界面~ 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726808730a1085292.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论