物联网(IoT)入门的核心是理解 “感知层 – 网络层 – 应用层” 的基础架构,而温湿度监控系统是覆盖全流程、硬件成本低、代码逻辑清晰的经典实战项目。本文将从硬件选型、原理讲解、代码实现到最终运行,手把手带新手完成开发,所有源码均可直接复用。
一、项目整体框架
本项目实现 “环境温湿度采集→WiFi 传输→云端存储→Web 页面展示” 的全流程,核心架构分为 3 层:
- 感知层:通过温湿度传感器(DHT11)采集环境数据;
- 网络层:通过 ESP8266 WiFi 模块将数据发送到云端平台;
- 应用层:通过云端平台存储数据,并在 Web 页面实时展示温湿度曲线。
项目目标:10 分钟内完成硬件接线,30 分钟内调试通代码,最终实现手机 / 电脑实时查看环境温湿度。
二、硬件选型(新手友好,总成本≤50 元)
选择性价比高、资料丰富的入门级硬件,避免因硬件复杂劝退:
硬件模块 | 核心作用 | 参考价格 | 新手优势 |
---|---|---|---|
ESP8266(NodeMCU) | 核心主控,负责采集数据 + WiFi 联网 | 25 元 | 自带 USB,无需额外烧录器,支持 Arduino 编程 |
DHT11 传感器 | 采集环境温度(0-50℃)和湿度(20%-90% RH) | 5 元 | 单总线通信,接线简单,数据稳定 |
杜邦线(公对公) | 连接硬件模块 | 3 元 | 可随意插拔,方便调试 |
Micro USB 数据线 | 给 ESP8266 供电 + 烧录代码 | 自备 | 手机充电线即可复用 |
注意:ESP8266 建议选 “NodeMCU” 版型,自带 CH340 驱动芯片,无需额外安装复杂驱动。
三、前期准备(2 步搞定环境搭建)
1. 硬件接线(3 根线搞定,零错误)
ESP8266 与 DHT11 的接线逻辑极其简单,按以下对应关系连接,正负极千万不要接反(会烧毁传感器):
DHT11 引脚 | ESP8266 引脚 | 接线说明 |
---|---|---|
VCC(+) | 3.3V | 传感器供电(必须 3.3V,5V 可能烧毁) |
GND(-) | GND | 接地 |
DATA(中) | D4(GPIO2) | 数据传输引脚 |
接线示意图:
DHT11 的 VCC → ESP8266 的 3.3V;DHT11 的 GND → ESP8266 的 GND;DHT11 的 DATA → ESP8266 的 D4。
DHT11 的 VCC → ESP8266 的 3.3V;DHT11 的 GND → ESP8266 的 GND;DHT11 的 DATA → ESP8266 的 D4。
2. 软件环境搭建(Arduino IDE + 驱动)
ESP8266 支持 Arduino 编程,新手无需学习复杂的嵌入式语法:
- 安装 Arduino IDE:从Arduino 官网下载对应系统的 IDE(Windows/Mac 均支持),傻瓜式安装。
- 安装 ESP8266 开发板支持:
打开 Arduino IDE → 点击「文件」→「首选项」→「附加开发板管理器网址」,输入:http://arduino.esp8266.com/stable/package_esp8266com_index.json
,点击 “确定”。
再点击「工具」→「开发板」→「开发板管理器」,搜索 “esp8266”,安装最新版本(约 2 分钟)。 - 安装 DHT11 库:
点击「项目」→「加载库」→「管理库」,搜索 “DHT sensor library”,安装 Adafruit 出品的库(新手必用稳定库)。 - 安装 CH340 驱动(若 USB 连接无反应):
若 ESP8266 插电脑后,IDE 的「工具」→「端口」无选项,需安装CH340 驱动(根据系统选 32/64 位)。
四、核心代码实现(附完整源码 + 注释)
本项目代码分为两部分:ESP8266 采集 + 上传代码 和 云端 Web 展示代码。我们选用国内免费云端平台 “OneNet”(无需自己搭建服务器,新手友好)。
第一步:OneNet 云端配置(5 分钟搞定)
- 注册OneNet 账号,登录后进入「控制台」→「产品服务」→「多协议接入」→「HTTP」→「添加产品」:
- 产品名称:WiFi 温湿度监控
- 行业类别:智能家居
- 设备类型:温湿度传感器
点击 “确定”,记录产品的「产品 ID」。
- 进入产品详情页,点击「设备管理」→「添加设备」,记录设备的「设备 ID」和「鉴权信息(APIKey)」。
第二步:ESP8266 代码(可直接复制运行)
将以下代码复制到 Arduino IDE,修改 3 处关键配置(WiFi 名称、密码、OneNet 信息),即可烧录到 ESP8266。
cpp
运行
// 引入必需的库
#include <ESP8266WiFi.h> // ESP8266 WiFi库
#include <DHT.h> // DHT11传感器库
// ---------------------- 【需手动修改的配置】 ----------------------
const char* WIFI_SSID = "你的WiFi名称"; // 家里/公司的WiFi名称
const char* WIFI_PASS = "你的WiFi密码"; // WiFi密码
const char* ONENET_API_KEY = "你的设备APIKey"; // OneNet设备鉴权信息
const char* ONENET_DEVICE_ID = "你的设备ID"; // OneNet设备ID
const char* ONENET_PRODUCT_ID = "你的产品ID"; // OneNet产品ID
// -----------------------------------------------------------------
// 硬件引脚定义(DHT11接D4引脚)
#define DHTPIN D4
#define DHTTYPE DHT11 // 传感器类型为DHT11
// 初始化对象
DHT dht(DHTPIN, DHTTYPE);
WiFiClient client;
// OneNet上传地址(固定,无需修改)
const char* host = "api.heclouds.com";
const int port = 80;
void setup() {
Serial.begin(115200); // 初始化串口(用于调试,波特率115200)
dht.begin(); // 初始化DHT11传感器
// 连接WiFi
connectWiFi();
}
void loop() {
// 若WiFi断开,自动重连
if (WiFi.status() != WL_CONNECTED) {
connectWiFi();
}
// 1. 读取温湿度数据(DHT11建议每隔2秒读一次,避免数据错误)
float humidity = dht.readHumidity(); // 读取湿度(%RH)
float temperature = dht.readTemperature(); // 读取温度(℃)
// 2. 校验数据是否有效(DHT11可能读取失败,需过滤)
if (isnan(humidity) || isnan(temperature)) {
Serial.println("读取DHT11数据失败,请检查接线!");
delay(2000);
return;
}
// 3. 打印数据到串口(调试用)
Serial.print("湿度: ");
Serial.print(humidity);
Serial.print("% 温度: ");
Serial.print(temperature);
Serial.println("℃");
// 4. 上传数据到OneNet
uploadToOneNet(temperature, humidity);
delay(5000); // 每隔5秒上传一次数据
}
// 【函数1:连接WiFi】
void connectWiFi() {
Serial.print("正在连接WiFi: ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASS); // 启动WiFi连接
// 等待连接成功(超时10秒)
int count = 0;
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
count++;
if (count > 20) {
Serial.println("WiFi连接失败,请检查名称和密码!");
break;
}
}
// 连接成功提示
if (WiFi.status() == WL_CONNECTED) {
Serial.println("\nWiFi连接成功!IP地址: ");
Serial.println(WiFi.localIP()); // 打印ESP8266的IP地址
}
}
// 【函数2:上传数据到OneNet】
void uploadToOneNet(float temp, float humi) {
// 1. 连接OneNet服务器
if (!client.connect(host, port)) {
Serial.println("连接OneNet失败!");
return;
}
// 2. 构造上传数据格式(OneNet要求的JSON格式)
String data = "{\"temp\":" + String(temp) + ",\"humi\":" + String(humi) + "}";
// 3. 构造HTTP请求头(固定格式,只需替换APIKey/DeviceID)
String httpRequest = "POST /devices/" + String(ONENET_DEVICE_ID) + "/datapoints HTTP/1.1\r\n";
httpRequest += "api-key: " + String(ONENET_API_KEY) + "\r\n";
httpRequest += "Host: api.heclouds.com\r\n";
httpRequest += "Content-Length: " + String(data.length()) + "\r\n";
httpRequest += "Connection: close\r\n\r\n";
httpRequest += data;
// 4. 发送请求
client.print(httpRequest);
Serial.println("数据上传中: " + data);
// 5. 读取OneNet响应(调试用)
delay(1000);
String response = "";
while (client.available()) {
response += char(client.read());
}
Serial.println("OneNet响应: " + response);
// 6. 断开连接
client.stop();
}
第三步:Web 页面展示代码(可视化温湿度)
OneNet 自带数据展示功能,但我们可以用简单的 HTML+JavaScript 实现自定义页面(复制到记事本,改后缀为
.html
即可打开):
html
预览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WiFi温湿度监控</title>
<style>
body { font-family: Arial; text-align: center; margin-top: 50px; }
.data { font-size: 30px; margin: 20px 0; }
.title { font-size: 24px; color: #333; }
</style>
</head>
<body>
<div class="title">实时温湿度监控</div>
<div class="data">温度: <span id="temp">--</span> ℃</div>
<div class="data">湿度: <span id="humi">--</span> %RH</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div style="width: 80%; margin: 50px auto;"><canvas id="chart"></canvas></div>
<script>
// 替换为你的OneNet信息
const API_KEY = "你的设备APIKey";
const DEVICE_ID = "你的设备ID";
const PRODUCT_ID = "你的产品ID";
// 初始化图表
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // 时间轴
datasets: [
{ label: '温度(℃)', data: [], borderColor: 'red', tension: 0.1 },
{ label: '湿度(%RH)', data: [], borderColor: 'blue', tension: 0.1 }
]
},
options: { scales: { x: { title: { display: true, text: '时间' } } } }
});
// 定时获取数据(每5秒一次)
setInterval(getData, 5000);
// 获取OneNet数据
function getData() {
fetch(`http://api.heclouds.com/devices/${DEVICE_ID}/datapoints?limit=1`, {
headers: { "api-key": API_KEY }
})
.then(res => res.json())
.then(data => {
if (data.errno === 0) {
// 解析数据
const temp = data.data.datapoints[0].value.temp;
const humi = data.data.datapoints[0].value.humi;
const time = new Date(data.data.datapoints[0].at).toLocaleTimeString();
// 更新页面显示
document.getElementById('temp').innerText = temp;
document.getElementById('humi').innerText = humi;
// 更新图表
chart.data.labels.push(time);
chart.data.datasets[0].data.push(temp);
chart.data.datasets[1].data.push(humi);
// 只保留最近10个数据点
if (chart.data.labels.length > 10) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
chart.data.datasets[1].data.shift();
}
chart.update();
}
})
.catch(err => console.log("获取数据失败:", err));
}
// 首次加载立即获取数据
getData();
</script>
</body>
</html>
五、运行与调试(新手避坑指南)
1. 烧录代码到 ESP8266
- ESP8266 插电脑,在 Arduino IDE 中选「工具」→「开发板」→「esp8266 boards」→「NodeMCU 1.0 (ESP-12E Module)」;
- 选「工具」→「端口」→ 选带 “USB-SERIAL CH340” 的端口;
- 点击 IDE 左上角的 “上传” 按钮(右箭头),等待下方提示 “上传成功”(约 10 秒)。
2. 调试常见问题(99% 新手会遇到)
问题现象 | 排查方案 |
---|---|
上传代码时提示 “端口不可用” | 1. 重新插拔 USB;2. 安装 CH340 驱动;3. 关闭占用端口的软件(如串口助手) |
串口打印 “读取 DHT11 失败” | 1. 检查接线(DATA 是否接 D4,VCC 是否 3.3V);2. 更换 DHT11 传感器 |
WiFi 连接失败 | 1. 确认 WiFi 名称 / 密码无空格;2. WiFi 需 2.4G(ESP8266 不支持 5G) |
OneNet 上传失败 | 1. 检查 APIKey/DeviceID 是否填错;2. 设备是否在 OneNet 在线(控制台查看) |
六、项目拓展(进阶方向)
- 添加报警功能:当温度>30℃时,ESP8266 控制 LED 灯闪烁(需加 LED 模块,代码加
digitalWrite(LED_BUILTIN, LOW)
); - 手机 APP 查看:OneNet 支持生成 “应用面板”,手机扫码即可查看数据,无需自己写 APP;
- 改用蓝牙传输:若无需远程查看,可替换 ESP8266 为 HC-05 蓝牙模块,手机通过蓝牙直接接收数据;
- 多传感器扩展:增加光敏电阻(测亮度)、MQ-2 烟雾传感器(测烟雾),代码只需复制 DHT11 的读取逻辑。
七、源码获取与资源
- 完整源码包:包含 Arduino 代码、HTML 页面、接线图,可关注【物联网入门站】回复 “温湿度” 获取;
- 视频教程:B 站搜索 “ESP8266 温湿度监控”,可看手把手接线 + 调试视频;
- 硬件购买:淘宝搜索 “ESP8266 DHT11 套件”,新手建议买带焊接好的套装(避免自己焊引脚)。
通过本项目,新手可快速掌握物联网 “传感器采集 – 联网传输 – 云端存储 – 应用展示” 的核心逻辑,后续再学蓝牙、LoRa、MQTT 等协议会更轻松!