ESP8266搭建网页(小白教程)

[复制链接]
查看2495 | 回复27 | 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】,根据提示,自动配网!
  • cfcd1e2535ee47719b3eb03c0113152.jpg fcb8bc5b316fbd2bde0e543d65fce21.jpg d3568c63a2eefc443e78de10d9357b4.jpg
  • 配网完成后,打开串口监视器,找到【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网站里
欢迎入驻!!!



8e2605e2d8867ebd00d4f29123c42d2.jpg
f2b262ca1f603f6318c885c321fa563.jpg
回复

使用道具 举报

爱笑 | 2023-8-31 09:01:33 | 显示全部楼层
好彩的文章~
用心做好保姆工作
回复 支持 反对

使用道具 举报

ai_mcu | 2023-8-31 09:02:36 | 显示全部楼层
知识+1,见识+1,地位-1
明天总会更好
回复 支持 反对

使用道具 举报

15625388486 | 2023-8-31 09:21:01 | 显示全部楼层
我顶
回复

使用道具 举报

王乐乐 | 2023-8-31 11:25:03 | 显示全部楼层
666
回复

使用道具 举报

guoyuli | 2023-9-5 16:41:24 | 显示全部楼层
学习了,之前只知道有WIFI杀手
回复 支持 反对

使用道具 举报

rqh159753 | 2023-9-19 14:17:35 | 显示全部楼层
学习学习
回复

使用道具 举报

lsrly | 2023-9-27 09:16:11 | 显示全部楼层
8266玩法越来越多了
好好学习,努力挣钱,专心
回复 支持 反对

使用道具 举报

linyuuki | 2023-9-27 10:54:36 来自手机 | 显示全部楼层
好像在b站看过视频
回复 支持 反对

使用道具 举报

Ject | 2023-10-9 11:21:41 | 显示全部楼层
学习一下
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则