网友教程：https://blog.csdn.net/solar_Lan/article/details/74231360
通过网友教程，我们搭建了文件系统。在此基础上，我们增加WIFI交互。
现有功能：
1 输入默认WIFI信息，ESP8266上电后直接连接，得到分配的IP
2 网页同一个局域网下访问IP，出现配置界面，告诉ESP8266要连接的WIFI信息
未来需要加入;
1 ESP8266上电进入AP_STA模式，固定IP194.168.4.1 等待手机连接AP热点，通过网页输入目标WIFI账号和密码。
2 ESP8266接收到WIFI信息后，自己去链接。完成配网功能
esp8266代码
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>
ESP8266WebServer server ( 80 );
String ssid = "HUAWEI-H3VBKZ"; // 需要连接的wifi热点名称
String password ="13991320168"; // 需要连接的wifi热点密码
/**
* 根据文件后缀获取html协议的返回内容类型
*/
String getContentType(String filename){
if(server.hasArg("download")) return "application/octet-stream";
else if(filename.endsWith(".htm")) return "text/html";
else if(filename.endsWith(".html")) return "text/html";
else if(filename.endsWith(".css")) return "text/css";
else if(filename.endsWith(".js")) return "application/javascript";
else if(filename.endsWith(".png")) return "image/png";
else if(filename.endsWith(".gif")) return "image/gif";
else if(filename.endsWith(".jpg")) return "image/jpeg";
else if(filename.endsWith(".ico")) return "image/x-icon";
else if(filename.endsWith(".xml")) return "text/xml";
else if(filename.endsWith(".pdf")) return "application/x-pdf";
else if(filename.endsWith(".zip")) return "application/x-zip";
else if(filename.endsWith(".gz")) return "application/x-gzip";
return "text/plain";
}
/* NotFound处理
* 用于处理没有注册的请求地址
* 一般是处理一些页面请求
*/
void handleNotFound() {
String path = server.uri();
Serial.print("load url:");
Serial.println(path);
String contentType = getContentType(path);
String pathWithGz = path + ".gz";
if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)){
if(SPIFFS.exists(pathWithGz))
path += ".gz";
File file = SPIFFS.open(path, "r");
size_t sent = server.streamFile(file, contentType);
file.close();
return;
}
String message = "File Not Found
";
message += "URI: ";
message += server.uri();
message += "
Method: ";
message += ( server.method() == HTTP_GET ) ? "GET" : "POST";
message += "
Arguments: ";
message += server.args();
message += "
";
for ( uint8_t i = 0; i < server.args(); i++ ) {
message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "
";
}
server.send ( 404, "text/plain", message );
}
void handleMain() {
/* 返回信息给浏览器（状态码，Content-type， 内容）
* 这里是访问当前设备ip直接返回一个String
*/
Serial.print("handleMain");
File file = SPIFFS.open("/index.html", "r");
size_t sent = server.streamFile(file, "text/html");
file.close();
return;
}
/* 引脚更改处理
* 访问地址为htp://192.162.xxx.xxx/pin?a=XXX的时候根据a的值来进行对应的处理
*/
void handlePin() {
if(server.hasArg("a")) { // 请求中是否包含有a的参数
String action = server.arg("a"); // 获得a参数的值
if(action == "on") { // a=on
digitalWrite(2, LOW); // 点亮8266上的蓝色led，led是低电平驱动，需要拉低才能亮
server.send ( 200, "text/html", "Pin 2 has turn on"); return; // 返回数据
} else if(action == "off") { // a=off
digitalWrite(2, HIGH); // 熄灭板载led
server.send ( 200, "text/html", "Pin 2 has turn off"); return;
}
server.send ( 200, "text/html", "unknown action"); return;
}
server.send ( 200, "text/html", "action no found");
}
void handleWifi(){
if(server.hasArg("config")) { // 请求中是否包含有a的参数
String config = server.arg("config"); // 获得a参数的值
String wifiname;
String wifipwd;
if(config == "on") { // a=on
if(server.hasArg("name")) { // 请求中是否包含有a的参数
wifiname = server.arg("name"); // 获得a参数的值
}
if(server.hasArg("pwd")) { // 请求中是否包含有a的参数
wifipwd = server.arg("pwd"); // 获得a参数的值
}
String backtxt= "已经连接WIFI！ 名称:"+ wifiname +" 密码:"+ wifipwd ;
server.send ( 200, "text/html", backtxt);
return;
} else if(config == "off") { // a=off
server.send ( 200, "text/html", "config is off!");
return;
}
server.send ( 200, "text/html", "unknown action"); return;
}
server.send ( 200, "text/html", "action no found");
}
void setup() {
// 日常初始化网络
pinMode(2, OUTPUT);
Serial.begin ( 115200 );
SPIFFS.begin();
int connectCount = 0;
WiFi.begin ( ssid.c_str(), password.c_str() );
while ( WiFi.status() != WL_CONNECTED ) {
delay ( 1000 );
Serial.print ( "." );
if(connectCount > 30) {
Serial.println( "Connect fail!" );
break;
}
connectCount += 1;
}
if(WiFi.status() == WL_CONNECTED) {
Serial.println ( "" );
Serial.print ( "Connected to " );
Serial.println ( ssid );
Serial.print ( "IP address: " );
Serial.println ( WiFi.localIP() );
connectCount = 0;
}
server.on ("/", handleMain); // 绑定‘/’地址到handleMain方法处理
server.on ("/pin", HTTP_GET, handlePin); // 绑定‘/pin’地址到handlePin方法处理
server.on ("/wifi", HTTP_GET, handleWifi); // 绑定‘/pin’地址到handlePin方法处理
server.onNotFound ( handleNotFound ); // NotFound处理
server.begin();
Serial.println ( "HTTP server started" );
}
void loop() {
/* 循环处理，因为ESP8266的自带的中断已经被系统占用，
* 只能用过循环的方式来处理网络请求
*/
server.handleClient();
}
esp8266 flash中要存的网页信息
网友未修改的网页文件 链接：https://pan.baidu.com/s/1vk6xmsYZuJe8CMFzJNKdJw 密码：oiz2
工程文件夹同目录 data
data文件夹下
自己修改 index网页文件
直接打开的样子（没有布局文件）
---比较丑陋---
通过ESP8266返回打开i的样子（加载了布局文件）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266 配置信息</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ESP8266</a>
</div>
</div>
</nav>
<div class="container">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">主页</a></li>
<li role="presentation" class="active"><a href="#">其它</a></li>
</ul>
<div class="starter-template">
<h1>欢迎</h1>
<button onclick='setPinValue("on")' >点亮板载LED</button></br>
<button onclick='setPinValue("off")' >熄灭板载LED</button>
<p>状态消息: <span id="txtState"></span></p>
</div>
<div class="starter-template">
<h3>连接WIFI:</h3>
<form action="">
名称: <input type="text" id="wifiname" />
</form>
<form action="">
密码: <input type="text" id="wifipwd" />
</form></br>
<button onclick='setWifi(wifiname.value,wifipwd.value)' >连接</button>
<p>连接状态: <span id="wifiState"></span></p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function setPinValue(value) {
alert("按键点击！");
var xmlhttp;
if (value.length==0)
{
document.getElementById("txtState").innerHTML="请点击正确按键！";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//alert(xmlhttp.responseText);
//alert("操作成功");
document.getElementById("txtState").innerHTML = xmlhttp.responseText;
}
}
var requestString = "/pin?a=" + value + "&pin=2";
xmlhttp.open("GET", requestString, true);
xmlhttp.send(null);
}
function setWifi(name,pwd) {
alert("按键点击！");
var xmlhttp;
if (name.length==0)
{
document.getElementById("wifiState").innerHTML="请输入WIFI信息！";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//alert(xmlhttp.responseText);
//alert("操作成功");
document.getElementById("wifiState").innerHTML = xmlhttp.responseText;
}
}
var requestString = "/wifi?config=on" + "&name="+name+"&pwd="+pwd;
xmlhttp.open("GET", requestString, true);
xmlhttp.send(null);
}
</script>
</body>
</html>