ESP8266搭建网页（小白教程）

显示全部楼层 · 2023-8-31 00:27:19

ESP8266搭建网页（小白教程）总所周知，esp8266最大的特色就是wifi了（虽然esp32也有，但是8266便宜那么一点点）
有了wifi，必然局域网就诞生了
有个局域网，网页服务器就诞生了

【如果你有公网ip，可以内网穿透出去，就可以通过公网ip/域名来访问网页了！】
【内网穿透方法亲测有效，且esp8266性能完全没问题！】

网页服务器可以加载【js，css，html】纯静态网页，文件可以引用链接，php文件加载不了

登录/注册后可看大图

登录/注册后可看大图

源码地址：

游客，如果您要查看本帖隐藏内容请回复

源码纯在蓝奏云网盘，搬运可以，请保留出处！

教程（IED部分）

解压文件夹，文件夹全部名称不要改，以免出现以外！
打开【new.ino】
将源码上传到esp8266
【必要】下载esp8266闪存系统，下载地址：
游客，如果您要查看本帖隐藏内容请回复
打开arduino，文件--首选项--项目文件夹位置--预览--建立一个【tools】文件夹，把下载的闪存系统解压到文件夹里面
登录/注册后可看大图
登录/注册后可看大图
登录/注册后可看大图
重启arduino，工具,会出现esp8266 sketch data upload，（上传的时候，必须关闭串口监视器）
登录/注册后可看大图
【注意】代码11行改网页的端口号，公网ip可能没有80端口，你可以改成别的，如999
登录/注册后可看大图
【注意】无需改网络配置，代码上传开发板后，手机打开wifi列表。找到【ESP8266_AUTO】，根据提示，自动配网！
配网完成后，打开串口监视器，找到【IP address:】后面则是网页服务器的ip地址
登录/注册后可看大图
根据ip地址，复制到浏览器，即可看到你的网页（背景图加载会慢一点）

登录/注册后可看大图

教程（网页部分）

打开文件夹【new】,目录下面【data】
登录/注册后可看大图
【data】里面有4个文件，css和js看不懂的可以不管
img放图片，index.html是静态文件，里面的文字，就是网页显示的文字，比如联系方式什么的
登录/注册后可看大图
右键index.html记事本可以打开，然后自己改，不要改代码，改文字
改完之后，保存，然后打开arduino，esp8266 sketch data upload，点一下上传最新的文件

其他
稳定性（内网穿透，外网访问下）
亲测，7x24稳定运行，低发热量
功耗（内网穿透，外网访问下）
80mA/h，一天80x24=1920毫安
运行速度（内网穿透，外网访问下）
有腾讯云cdn缓存，200ms打开速度

联系方式
【邮箱】xemowo@qq.com
【QQ】3046981740
【api站点】http://api.xemowo.top

有任何问题，都可以通过邮箱联系我！
平时很多教程，工具我都会放在我的api网站里
欢迎入驻！！！