ESP8266的wifi设置网上已经很多文章,本文也是配置wifi信息,但是是一种自定义的通用方式而不仅仅用来配置wifi设置。本文通过使用ESP8266WebServer来实现一个网页配置。
先上代码
class CAutoConnect
{
CConfigMgr m_configMgr;
ESP8266WebServer m_autoConfigWebServer;
bool m_bRunFirst = true;
void TryConnect(const char *SSID, const char *PSW)
{
int tryCount = 0;
WiFi.begin(SSID, PSW);
while ((tryCount < MAX_TRY_COUNT) && (WiFi.status() != WL_CONNECTED))
{
delay(1000);
tryCount++;
}
}
void HandleHtmlRoot()
{
m_autoConfigWebServer.send(200, "text/html", AutoConfigHTML);
}
void HandleHtmlAutoConfig()
{
String ssid, psw;
ssid = m_autoConfigWebServer.arg("ssid");
psw = m_autoConfigWebServer.arg("psw");
Serial.println("尝试连接路由器,SSID: " + ssid + "密码: " + psw);
TryConnect(ssid.c_str(), psw.c_str());
if (WiFi.status() == WL_CONNECTED)
{
m_autoConfigWebServer.send(200, "text/html", "hello esp8266");
Serial.println("----------连接路由器成功");
m_configMgr.SetSSID(ssid.c_str());
m_configMgr.SetPSW(psw.c_str());
// 保存一下,这玩意儿一般就是拔电。要自动析构保存怕是比较难
m_configMgr.SaveConfig();
}
else
{
Serial.println("连接路由器失败------------");
}
}
void HtmlConfigInit()
{
WiFi.mode(WIFI_AP_STA); // 双模式
IPAddress ip, gateway, subnet;
ip.fromString("192.168.1.1");
gateway.fromString("192.168.1.1");
subnet.fromString("255.255.255.0");
WiFi.softAPConfig(ip, gateway, subnet);
WiFi.softAP(AUTOCFGSSID, AUTOCFGPSW);
m_autoConfigWebServer.on("/", std::bind(&CAutoConnect::HandleHtmlRoot, this));
m_autoConfigWebServer.on("/AutoConfig", HTTP_GET, std::bind(&CAutoConnect::HandleHtmlAutoConfig, this));
m_autoConfigWebServer.begin(80);
}
void HtmlConfig(bool useTimeout=false)
{
unsigned long start = millis();
while (true)
{
m_autoConfigWebServer.handleClient();
if (WiFi.status() == WL_CONNECTED)
{
Serial.println("----配网成功----");
m_autoConfigWebServer.close();
break;
}
// 60秒还没有连接则退出
if (useTimeout&&(millis() - start >= 60 * 1000))
{
break;
}
}
}
public:
CAutoConnect() : m_configMgr()
{
HtmlConfigInit();
}
~CAutoConnect() {}
void AutoConnect()
{
if (m_bRunFirst)
{
HtmlConfig(true);
m_bRunFirst = false;
}
// wifi已经连接直接退出
if (WiFi.status() == WL_CONNECTED)
return;
if ( m_configMgr.IsValid())
{
TryConnect(m_configMgr.SSID().c_str(), m_configMgr.PSW().c_str());
if (WiFi.status() == WL_CONNECTED)
return;
}
Serial.println("进入HTML配网模式");
HtmlConfig();
}
};
CConfigMgr 是一个配置保存和读取类,这个另外说。
CAutoConnect的AutoConnect方法来实现自动配置和连接wifi(当然也可以配置其它参数);如果是开机启动则进入60秒配网模式,这个时候在192.168.1.1即可打开网页配置。AutoConfigHTML 为配置网页。如果60秒没有通过网页配置,它则从保存的配置来设置wifi。当然保存的连接不可用也会进入网页配网模式。
const char *AutoConfigHTML = u8R"esp8266_html(<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>ESP8266自动配置</title>
</head>
<body style="font-size: 30px">
<style>
.inputText{
height: 38px;
font-size: 30px;
line-height: 30px;
padding-left: 15px;
border-radius: 10px;
background-color: #dff1f7;
border: 2;
}
.inputText:focus{
outline: none;
background-color: #d6e4eb;
}
.buttonText{
height: 38px;
font-size: 30px;
line-height: 30px;
padding-left: 15px;
border-radius: 10px;
background-color: #FE5E08;
border: none;
}
.buttonText:focus{
outline: none;
background-color: #FE5E08;
}
</style>
<center>
<form>
<table>
<tr>
<td>Wifi SSID:</td>
<td><input type="text" class="inputText" id="SSID" placeholder="WIFI SSID"></td>
</tr>
<tr>
<td>Wifi 密码:</td>
<td><input type="text" class="inputText" id="PSW" placeholder="WIFI PASSWORD"></td>
</tr>
</table>
<input type="button" class="buttonText" value="连接到WIFI" onclick="configWifi()">
</form>
</center>
<script language="javascript">
function isNotEmptyStr(s) {
if (typeof s == 'string' && s.length > 0) {
return true
}
return false
}
function configWifi() {
var ssid = SSID.value;
var psw = PSW.value;
if (!isNotEmptyStr(ssid)) {
alert("请输入有效的SSID");
return;
}
if (!isNotEmptyStr(psw)) {
alert("请输入有效的Wifi密码");
return;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/AutoConfig?ssid=" + ssid + "&psw=" + psw, true);
xmlhttp.send();
}
</script>
</body>
</html>)esp8266_html";
网页实际效果为以上,当然这里可以添加任意需要处理的配置参数,合理保存即可。
HtmlConfigInit为webserver主要方法。
使用方法,先打开手机WIFI。连接到名为ESP8266_WIFI的wifi热点(注意,因为这个节点无法访问internet。部分手机网络助手会自动断开。所以先在手机里设置一下防止它自动断开)。这个时候使用浏览器打开 192.168.1.1