描述
详细说明
ESP8266的出现使物联网终端变得易如反掌，如今在家部署些无线设备早已不是什么新鲜事，但是要想开发出界面优美的图形控制程序，还是很伤脑筋。为桌面电脑，安卓和IOS设备分别打造一个图像界面显然划不来。基于HTTP协议的控制程序似乎是不错的选择，可是将庞大的html模板文件连同资源和程序一起烧入芯片，需要不小的空间。我的esp-12片载4MB的flash虽然勉强够用，烧录起来仍然极其繁琐。
当然，有人会说解决办法有的是，换一个大容量的芯片，或者租一个云服务器作中介，又或者内网穿透一下。话虽不错，问题在于如果这样干我还要物联网芯片做什么？？？我干嘛不直接把我的二手笔记本电脑接在路由器上，128G的硬盘+4G内存，网盘+服务器都有了，还能加载个网页小游戏呢。
要想成为一名合格的技术宅，必须足够任性，我偏要在8266上加载出网页的动画效果。一番思索过后，我想起了GitHub Pages。这个能托管静态网页的开放服务，可以被用来代替储存耗费资源的图形动画，剩下的就是通信的问题了，由于本地网页和远程网页不在一个域名下，所以使用了postMessage方法实现跨域访问，这样就实现了子页面与父页面的通信。
链接表
文件库
esp8266_GUI.zip
[202700 Bytes at 2020-07-02, 11 次下载]
教程
组件清单
- ESP8266开发板 × 1
- IDE或其它开发环境和烧写工具 × 1
写在前面
这个实现其实不难，但是叙述起来还蛮繁琐，以后再录个视频好了 ; )
重点只有一个，那就是数据的处理完全交给用户端的浏览器，ESP8266只负责接收POST请求提交的指令并控制相应的硬件设备。
需要的知识储备
HTML+js/jquery+css+C+arduino IDE
抽象原理
在GitHub Pages部署带有图形界面和跨域请求的静态网页。
在ESP8266上部署带有控制程序的本地的HTTP服务器
在本地服务器的网页中使用iframe嵌入GitHub Pages托管的图形界面，并收听子页面的跨域请求
用户端打开本地网页，浏览器将自动加载嵌入的图形界面，其中的操作会被跨域转发到父窗口，也就是本地的网页
本地网页最终接收请求，处理，并驱动硬件
程序设计
完整代码已打包供下载，这里只说一些需要注意的地方
远程
远程的HTML界面可以随意设计，采用你喜欢的风格样式，只要用postMessage向父页面提交请求就行了。
-第一个参数是要提交的字符串
-第二个参数用来限定允许的域名，*表示没有限制
window.parent.postMessage('parameter=value','*') 本地
本地的html文件随意设计 只需包含一下内容，这段js代码告诉用户端接收子页面postMessage发来的信息并用POST请求转发给服务器。
-xmlHttpRequest实现ajax异步请求，因为这样不用刷新页面，减少资源消耗
-onmessage接收 | 因为是跨域访问，会涉及安全问题，推荐详细了解一下，可以看MDN的说明
<script type="text/javascript">
var httpRequest = new XMLHttpRequest();
window.onmessage = function(e) {
if (e.origin !== "https://x.x.x:x"){
console.log('illegal origin')
return
}
httpRequest.open('POST', '', true);
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.send(e.data);
}
</script>然后通过iframe嵌入远程HTML网页
<iframe src="https://x.x.x" class="frame" ></iframe>ESP程序控制
Arduino开发ESP8266需要配置环境，详情参考配置可参照 https://www.jianshu.com/p/cb0274d612b5
Arduino支持C++， 将本地HTML文件以String烧入芯片即可
const String html = "<!DOCTYPE html><html>......</html>";