用ESP32+OneNet做个智能温湿度计，还能手机远程开关灯（附uni-app前端源码）

本文详细介绍了如何使用ESP32开发板和OneNet物联网平台构建智能温湿度监测与远程控制系统，包含硬件搭建、固件开发、平台配置及uni-app移动端开发全流程。项目支持实时数据采集、手机远程控制LED灯，提供完整的uni-app前端源码，是物联网初学者和电子爱好者的实用入门指南。

weixin_30342209

117人浏览 · 2026-03-27 03:45:03

weixin_30342209 · 2026-03-27 03:45:03 发布

ESP32+OneNet智能温湿度监测与远程控制系统实战指南

在智能家居和物联网快速发展的今天，DIY一个属于自己的智能环境监测系统变得前所未有的简单。本文将带你从零开始，使用ESP32开发板、OneNet物联网平台和uni-app框架，构建一个功能完整的智能温湿度监测与远程控制系统。这个项目不仅适合物联网初学者作为入门实践，也能为电子爱好者提供可扩展的基础框架，甚至可以作为学生课设或毕设的优质选择。

1. 项目准备与硬件搭建

1.1 硬件组件清单与连接

构建这个智能系统需要以下核心硬件组件：

ESP32开发板：推荐使用ESP32-WROOM-32D，性价比高且稳定性好
DHT22温湿度传感器：精度高（温度±0.5℃，湿度±2%），响应快
LED灯模块：用于远程控制演示
电阻与连接线：220Ω电阻用于LED限流
面包板与杜邦线：便于快速原型搭建

硬件连接示意图如下：

组件	ESP32引脚	备注
DHT22 VCC	3.3V	电源正极
DHT22 GND	GND	电源地线
DHT22 DATA	GPIO4	数据引脚
LED正极	GPIO5	通过220Ω电阻连接
LED负极	GND	直接接地

提示：DHT22数据引脚建议连接一个4.7kΩ上拉电阻以确保信号稳定，部分模块已内置此电阻。

1.2 开发环境配置

在开始编码前，需要完成以下软件准备：

Arduino IDE安装：
- 从官网下载并安装最新版Arduino IDE
- 在首选项中添加ESP32开发板管理URL：https://dl.espressif.com/dl/package_esp32_index.json
- 通过开发板管理器安装ESP32开发板支持包
必要的库安装：
- DHT sensor library（用于温湿度传感器）
- OneNet MQTT库（用于与OneNet平台通信）
- ArduinoJson库（用于处理JSON数据）

# 通过Arduino库管理器安装所需库
# 依次搜索并安装：
# - "DHT sensor library" by Adafruit
# - "PubSubClient" by Nick O'Leary
# - "ArduinoJson" by Benoit Blanchon

OneNet平台准备：
- 注册OneNet开发者账号
- 在控制台创建新产品，选择"设备接入服务"
- 记录下产品ID、设备密钥等关键信息

2. ESP32固件开发

2.1 温湿度数据采集与上传

ESP32固件的核心功能是定期采集环境数据并上传至OneNet平台。以下是关键代码实现：

#include <WiFi.h>
#include <PubSubClient.h>
#include <DHT.h>

#define DHTPIN 4     // DHT22数据引脚
#define DHTTYPE DHT22 // DHT22传感器类型
#define LED_PIN 5    // LED控制引脚

const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";
const char* mqtt_server = "mqtt.heclouds.com";
const int mqtt_port = 1883;
const char* device_id = "your_device_id";
const char* product_id = "your_product_id";
const char* access_key = "your_access_key";

WiFiClient espClient;
PubSubClient client(espClient);
DHT dht(DHTPIN, DHTTYPE);

void setup_wifi() {
  delay(10);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
}

void reconnect() {
  while (!client.connected()) {
    String clientId = "ESP32Client-";
    clientId += String(random(0xffff), HEX);
    if (client.connect(clientId.c_str(), product_id, access_key)) {
      client.subscribe("cmd"); // 订阅命令主题
    } else {
      delay(5000);
    }
  }
}

void setup() {
  Serial.begin(115200);
  dht.begin();
  pinMode(LED_PIN, OUTPUT);
  setup_wifi();
  client.setServer(mqtt_server, mqtt_port);
  client.setCallback(callback);
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();

  static unsigned long lastMsg = 0;
  if (millis() - lastMsg > 5000) { // 每5秒上传一次数据
    lastMsg = millis();
    
    float humidity = dht.readHumidity();
    float temperature = dht.readTemperature();
    
    if (isnan(humidity) || isnan(temperature)) {
      Serial.println("Failed to read from DHT sensor!");
      return;
    }

    String payload = "{\"temp\":" + String(temperature) + 
                     ",\"humi\":" + String(humidity) + "}";
    client.publish("data", payload.c_str());
  }
}

void callback(char* topic, byte* payload, unsigned int length) {
  // 命令处理逻辑将在下一节实现
}

2.2 远程命令接收与执行

为了实现远程控制LED功能，需要扩展固件以处理来自OneNet的下行命令：

void callback(char* topic, byte* payload, unsigned int length) {
  String message;
  for (int i = 0; i < length; i++) {
    message += (char)payload[i];
  }
  
  DynamicJsonDocument doc(1024);
  deserializeJson(doc, message);
  
  if (doc.containsKey("led")) {
    int ledState = doc["led"];
    digitalWrite(LED_PIN, ledState ? HIGH : LOW);
    
    // 发送状态确认
    String ack = "{\"led\":" + String(ledState) + "}";
    client.publish("ack", ack.c_str());
  }
}

3. OneNet平台配置

3.1 设备接入与数据流创建

在OneNet平台上完成以下关键配置：

创建设备：
- 进入产品详情页，选择"设备管理"
- 点击"添加设备"，填写设备名称和鉴权信息
- 记录生成的设备ID，将在代码中使用
定义数据模型：
- 在"物模型"页面，添加两个属性：
  - 温度（temp）：float类型，单位℃
  - 湿度（humi）：float类型，单位%
- 添加一个服务：
  - LED控制（led_switch）：包含一个布尔型参数"led"
API权限配置：
- 在"权限管理"中，确保已开启以下API权限：
  - 设备属性上报
  - 设备服务调用
  - 设备命令下发

3.2 数据可视化配置

OneNet提供了强大的数据可视化工具，可以快速创建监控面板：

创建数据看板：
- 进入"应用管理"，选择"数据可视化"
- 新建一个看板，选择适合的模板
添加温湿度曲线：
- 拖拽"折线图"组件到看板
- 配置数据源为设备上报的温度和湿度属性
- 设置合适的刷新间隔（如5秒）
添加LED控制开关：
- 拖拽"开关"组件到看板
- 配置动作为调用设备的led_switch服务
- 可以设置开关样式和默认状态

4. uni-app移动端开发

4.1 项目创建与基础配置

使用HBuilder X创建uni-app项目：

# 创建uni-app项目
vue create -p dcloudio/uni-preset-vue iot-monitor-app

# 进入项目目录
cd iot-monitor-app

# 安装必要依赖
npm install @dcloudio/uni-ui

项目目录结构关键部分：

├── pages
│   ├── index
│   │   ├── index.vue      # 主页面
│   │   └── config.json    # 页面配置
├── static
│   └── icons              # 图标资源
├── App.vue                # 应用入口
└── manifest.json          # 应用配置

4.2 主页面开发

实现温湿度显示和LED控制的核心页面：

<template>
  <view class="container">
    <view class="card">
      <view class="title">环境监测</view>
      <view class="data-row">
        <text>温度: </text>
        <text class="value">{{ temp }}℃</text>
      </view>
      <view class="data-row">
        <text>湿度: </text>
        <text class="value">{{ humi }}%</text>
      </view>
    </view>
    
    <view class="card">
      <view class="title">LED控制</view>
      <switch :checked="led" @change="toggleLED" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      temp: 0,
      humi: 0,
      led: false,
      timer: null
    }
  },
  onLoad() {
    this.fetchData();
    this.timer = setInterval(this.fetchData, 3000);
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    async fetchData() {
      try {
        const res = await uni.request({
          url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',
          method: 'GET',
          header: {
            'Authorization': `token=${this.getToken()}`
          },
          data: {
            device_id: 'your_device_id'
          }
        });
        
        this.temp = res.data.data.temp;
        this.humi = res.data.data.humi;
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
    async toggleLED(e) {
      this.led = e.detail.value;
      try {
        await uni.request({
          url: 'https://iot-api.heclouds.com/thingmodel/invoke-service',
          method: 'POST',
          header: {
            'Authorization': `token=${this.getToken()}`
          },
          data: {
            device_id: 'your_device_id',
            service_id: 'led_switch',
            params: {
              led: this.led
            }
          }
        });
      } catch (error) {
        console.error('控制LED失败:', error);
      }
    },
    getToken() {
      // 实现token获取逻辑
      return 'your_generated_token';
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}
.data-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.value {
  font-weight: bold;
  color: #007AFF;
}
</style>