ESP32 做零云依赖的温湿度监测 Web 面板,60 元完整指南
ESP32 做零云依赖的温湿度监测 Web 面板60 元完整指南【免费下载链接】arduino-esp32Arduino core for the ESP32 family of SoCs项目地址: https://gitcode.com/GitHub_Trending/ar/arduino-esp32这套方案基于arduino-esp32ESP32 系列芯片的官方 Arduino 核心用不到 60 元的硬件成本把一支 DHT11 温湿度传感器接上 ESP32连入家里 WiFi 后手机或电脑在局域网内打开浏览器就能随时看到实时温度、湿度和设备状态。整个系统不依赖任何云平台不用申请 API 密钥没有持续费用数据只在你自己家里流动。读完本文你会完成开发环境配置、硬件接线、一个每 5 秒自动刷新的监测页面以及离线缓存、OTA 升级、低功耗休眠三个扩展方向。先回答一个问题真的需要上云吗很多教程让你把数据推到公网平台但如果你只是想随时看一眼室内温湿度局域网方案其实更合适。三种做法对比一下方案优点代价适合谁上传云平台有现成图表界面注册账号、API 密钥、长期费用需要出门远程看数据手机蓝牙 App不耗流量需要人在蓝牙范围内极小范围快速查看局域网 Web 面板本文免费、私有、手机电脑都能看需要和 ESP32 连同一 WiFi家庭内查看ESP32 本身就有完整的 WiFi 协议栈和 HTTP 服务器能力核心仓库自带WebServer、WiFi、Preferences等库所以局域网监测站几乎是零成本实现。下面按买什么 → 装环境 → 接线 → 写代码 → 验证的顺序一步步来。物料清单一共 4 样东西物料推荐型号用途参考价主控ESP32-DevKitC1 个WiFi 跑 Web 服务器¥45温湿度传感器DHT111 个读温度/湿度想要更高精度可换 DHT22¥8面包板 杜邦线1 套免焊接实验¥5USB 数据线Type-C供电 串口¥5如果手头有 10kΩ 电阻最好备一颗DHT11 上拉用没有的话多数模块自带。总预算 60 元出头。环境配置3 步装好 ESP32 开发环境第 1 步打开 Arduino IDE进入文件 → 首选项准备添加开发板管理器地址第 2 步在附加开发板管理器网址中填入 ESP32 官方的索引地址官方文档中给出保存后打开开发板管理器搜索esp32并安装第 3 步安装完成后在工具 → 开发板里选择esp32:ESP32 Arduino: ESP32 Dev Module。顺手在库管理器里装好DHT sensor library作者 Adafruit后面读传感器要用。想对照官方完整说明可以参考仓库文档docs/en/installing.rst。接线3 根线 1 颗电阻DHT11 只有 3 个引脚接线非常简单DHT11 引脚接到 ESP32说明VCC3.3V注意不是 5VDATAGPIO4中间串 10kΩ 上拉到 3.3VGNDGND共地不确定自己板子的引脚位置仓库里每种开发板都有对应的引脚定义文件例如 DevKitC 参考 variants/esp32/官方文档也整理了常见板子的引脚图见 docs/_static/esp32_devkitC_pinlayout.png核心代码三段就够下面只给关键片段完整可运行的版本可参考仓库自带示例 libraries/WebServer/examples/HelloServer/HelloServer.ino。① 连上家里 WiFi#include WiFi.h const char *ssid 你的WiFi名; const char *password 你的WiFi密码; void connectWiFi() { WiFi.mode(WIFI_STA); // STA 模式作为客户端连路由器 WiFi.begin(ssid, password); while (WiFi.status() ! WL_CONNECTED) { delay(300); Serial.print(.); // 串口监视器看连接进度 } Serial.println(WiFi.localIP()); // 记下这个 IP待会浏览器要访问 }② 读温湿度#include DHT.h DHT dht(4, DHT11); // 接在 GPIO4模块换 DHT22 就改这里 dht.begin(); float temp dht.readTemperature(); // 摄氏度 float hum dht.readHumidity(); // 相对湿度③ 让 ESP32 变成网页服务器#include WebServer.h WebServer server(80); void handleRoot() { // 用字符串拼一个 HTML 页面每 5 秒让浏览器自动刷新 String html !DOCTYPE htmlmeta charset\utf-8\ meta http-equiv\refresh\ content\5\ h1室内环境/h1 p温度: String(dht.readTemperature(), 1) deg;C/p p湿度: String(dht.readHumidity(), 0) %/p; server.send(200, text/html, html); }setup()里注册路由并启动服务器loop()里持续处理请求// setup(): server.on(/, handleRoot); server.begin(); // loop(): server.handleClient(); // 有请求就响应ESP32 此时以 Station 身份接入路由器同网段的手机、电脑都能访问它验证怎么判断做成功了上传固件后按顺序检查三步都通过就算成功**串口监视器115200 波特率**打印出一串 IP 地址说明 WiFi 已连上浏览器打开http://该IP/能看到温度和湿度两个数字页面停留 5 秒数字自动变化无需手动刷新。没成功先对照这张排错表现象最可能的原因处理办法串口一直打点、连不上WiFi 名/密码错或路由器只开了 5G 频段ESP32 经典款只支持 2.4G换一个 2.4G 网络重试温度显示 NaN没加上拉电阻或线接错补 10kΩ 上拉电阻对照上表检查三根线浏览器打不开页面手机/电脑和 ESP32 不在同一局域网确认两者连的是同一个 SSID页面不自动刷新refresh 标签没写全检查meta http-equivrefresh content5更多常见问题可以翻官方 FAQdocs/en/faq.rst。扩展方向跑通之后还能做什么监测页面只是起点arduino-esp32 的核心库里这些能力都是现成的断网不丢数据用 NVS 缓存最近的读数网络恢复后补显示。对应源码libraries/Preferences/空中升级固件不用插线局域网内直接 OTA 更新。对应源码libraries/ArduinoOTA/电池供电低功耗进入深度睡眠定时器到点醒来采一次数据再睡。示例代码libraries/ESP32/examples/DeepSleep/TimerWakeUp一屋多节点每个房间放一块 ESP32主节点把各分支 IP 轮询一遍拼成一个汇总页成本线性增加架构不变。想继续往深了看建议通读仓库文档目录docs/en/里面涵盖安装、API、排错的完整说明。收尾你拿到了什么一块 60 元的 ESP32、一支 DHT11加上三段短代码就得到了一个私有、免云费、手机随时可看的温湿度监测面板。后续无论是加光照传感器、换成 MQTT 上报还是做多房间组网这套传感器 WiFi WebServer的骨架都可以直接复用。项目代码可直接查看仓库示例 libraries/WebServer/examples/也可以把仓库克隆到本地对照调试git clone https://gitcode.com/GitHub_Trending/ar/arduino-esp32。接线和代码中卡在哪一步欢迎在项目讨论区留言一起把这个监测站玩出更多花样。【免费下载链接】arduino-esp32Arduino core for the ESP32 family of SoCs项目地址: https://gitcode.com/GitHub_Trending/ar/arduino-esp32创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考