别再只点灯了！用ESP32把温湿度数据推给OneNet，再用手机App远程控制（STM32也适用）

ESP32OneNetUni-App物联网开发实战双向通信与远程控制在物联网开发领域单向数据上传已经不能满足现代智能设备的需求。想象一下你不仅能查看家里的温湿度数据还能远程调节灯光亮度——这才是真正的智能生活体验。本文将带你用ESP32或STM32构建一个完整的物联网双向通信系统通过OneNet云平台实现数据上传与命令下发并用Uni-App开发跨平台控制界面。1. 系统架构设计与核心组件一个完整的物联网系统通常包含三个关键部分终端设备、云平台和用户界面。在这个项目中终端设备ESP32开发板兼容STM32负责采集环境温湿度数据DHT11/22传感器和控制LED状态云平台OneNet提供设备连接、数据存储和命令转发服务用户界面Uni-App开发的跨平台App实现数据可视化和远程控制核心通信流程ESP32定时采集传感器数据并通过HTTP协议上传至OneNet用户通过手机App查看数据并发送控制指令OneNet将指令转发给ESP32执行提示新版OneNet的物模型API相比传统MQTT协议更规范适合需要结构化数据管理的项目2. ESP32端开发从数据采集到云平台对接2.1 硬件准备与开发环境搭建所需硬件组件ESP32开发板如ESP32-DevKitCDHT11/DHT22温湿度传感器LED及220Ω限流电阻面包板和连接线开发环境配置步骤安装Arduino IDE并添加ESP32支持// 在Arduino首选项中添加开发板管理器URL https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json安装必要的库DHT sensor library温湿度传感器HTTPClient内置于ESP32 Arduino核心硬件连接DHT数据线 → GPIO4LED正极 → GPIO2通过电阻共地连接所有设备2.2 数据采集与HTTP上传实现核心代码结构#include WiFi.h #include HTTPClient.h #include DHT.h #define DHTPIN 4 #define DHTTYPE DHT22 DHT dht(DHTPIN, DHTTYPE); const char* ssid your_SSID; const char* password your_PASSWORD; const char* onenetApiKey your_API_KEY; const char* deviceId your_DEVICE_ID; void setup() { Serial.begin(115200); pinMode(2, OUTPUT); dht.begin(); connectWiFi(); } void loop() { float humidity dht.readHumidity(); float temperature dht.readTemperature(); if (!isnan(humidity) !isnan(temperature)) { uploadToOnenet(temperature, humidity); } delay(3000); // 3秒间隔 } void uploadToOnenet(float temp, float humi) { HTTPClient http; http.begin(http://api.heclouds.com/devices/ String(deviceId) /datapoints); http.addHeader(api-key, onenetApiKey); http.addHeader(Content-Type, application/json); String payload {\datastreams\:[{\id\:\temp\,\datapoints\:[{\value\: String(temp) }]}, {\id\:\humi\,\datapoints\:[{\value\: String(humi) }]}]}; int httpCode http.POST(payload); if (httpCode HTTP_CODE_OK) { Serial.println(Upload successful); } http.end(); }关键参数说明参数说明获取方式api-keyOneNet产品API密钥OneNet控制台→产品详情→API密钥deviceId设备唯一标识OneNet控制台→设备列表→设备编号datastreams数据流名称自定义需与物模型定义一致3. OneNet平台配置与物模型管理3.1 创建产品与定义物模型登录OneNet控制台进入物联网平台创建新产品选择自定义品类在物模型定义中添加两个属性和一个服务属性温度float、湿度float服务LED控制布尔型物模型JSON示例{ properties: [ { id: temperature, name: 温度, dataType: float, accessMode: r }, { id: humidity, name: 湿度, dataType: float, accessMode: r } ], services: [ { id: led_control, name: LED控制, callType: async, inputParams: [ { id: switch, name: 开关, dataType: bool } ] } ] }3.2 设备注册与在线调试在设备管理中注册新设备记录设备ID使用OneNet提供的设备模拟器测试数据上传通过物模型调试功能验证命令下发流程注意新版OneNet要求严格遵循物模型规范上传数据时必须匹配定义的属性ID4. Uni-App前端开发数据可视化与控制界面4.1 项目初始化与页面布局创建Uni-App项目并安装必要依赖# 创建项目 vue create -p dcloudio/uni-preset-vue iot-control-app # 安装uView UI框架 npm install uview-ui主页布局代码pages/index/index.vuetemplate view classcontainer view classdata-card view classdata-item text classlabel温度/text text classvalue{{ temperature }}℃/text /view view classdata-item text classlabel湿度/text text classvalue{{ humidity }}%/text /view /view view classcontrol-panel text classpanel-titleLED控制/text switch :checkedledStatus changetoggleLed color#4cd964/ /view /view /template script export default { data() { return { temperature: 0, humidity: 0, ledStatus: false } }, mounted() { this.startDataRefresh() }, methods: { async fetchDeviceData() { try { const res await uni.request({ url: https://api.heclouds.com/thingmodel/query-device-property, method: GET, header: { api-key: your_api_key }, data: { device_id: your_device_id } }) if (res[1].data.errno 0) { this.temperature res[1].data.data.properties.temperature this.humidity res[1].data.data.properties.humidity } } catch (error) { console.error(数据获取失败:, error) } }, async toggleLed(e) { this.ledStatus e.detail.value await uni.request({ url: https://api.heclouds.com/thingmodel/invoke-service, method: POST, header: { api-key: your_api_key }, data: { device_id: your_device_id, service_id: led_control, params: { switch: this.ledStatus } } }) }, startDataRefresh() { this.fetchDeviceData() setInterval(() { this.fetchDeviceData() }, 3000) } } } /script4.2 跨平台适配与优化技巧Uni-App的优势在于一次开发多端运行但各平台仍有差异需要注意微信小程序需配置合法域名在微信公众平台设置request合法域名Android App打包时需要网络权限在manifest.json中添加permission: { request: { android.permission.INTERNET } }iOS App需要开启ATSApp Transport Security在manifest.json中添加app-plus: { ios: { ATS: { NSAllowsArbitraryLoads: true } } }5. 系统联调与进阶优化5.1 常见问题排查指南问题现象可能原因解决方案数据上传失败API密钥错误检查OneNet控制台的API密钥命令无响应物模型不匹配确认服务ID和参数格式正确数据刷新延迟网络延迟适当增加轮询间隔LED状态不同步未处理初始状态设备启动时查询云端状态5.2 性能优化与功能扩展实时性提升方案使用WebSocket替代HTTP轮询OneNet支持MQTT over WebSocket实现本地状态缓存减少云端请求// ESP32端WebSocket连接示例 #include WebSocketsClient.h WebSocketsClient webSocket; void setup() { // ...其他初始化代码 webSocket.begin(api.heclouds.com, 80, /mqtt); webSocket.onEvent(webSocketEvent); } void webSocketEvent(WStype_t type, uint8_t * payload, size_t length) { switch(type) { case WStype_TEXT: if(strcmp((char*)payload, LED_ON) 0) { digitalWrite(2, HIGH); } else if(strcmp((char*)payload, LED_OFF) 0) { digitalWrite(2, LOW); } break; } }功能扩展方向添加多设备管理功能实现历史数据查询与图表展示增加异常报警推送短信/邮件集成语音控制通过平台AI能力在实际项目中我发现状态同步是最容易出问题的环节。一个实用的技巧是在设备启动时主动查询云端状态并在每次控制命令执行后立即上报当前状态这样可以避免因网络延迟导致的状态不一致问题。