1. 项目概述与环境搭建想象一下早晨醒来不用下床就能在手机上看到卧室的温湿度数据这就是我们要实现的智能环境监测系统。这个项目就像搭积木STM32是负责感知环境的大脑MQTT是传递消息的邮差微信小程序则是展示数据的窗口。我去年用这套方案给花房做了监测系统实测温湿度数据刷新延迟不到2秒。硬件清单里最核心的是STM32F103C8T6最小系统板江湖人称蓝 pill性价比之王。传感器方面DHT11虽然精度一般湿度±5%温度±2℃但胜在便宜好用。OLED显示屏建议选0.96寸I2C接口的接线简单不占IO口。网络模块用ESP8266-01S就行记得买带底板的那种否则烧录固件能让你怀疑人生。软件环境准备分三步走Keil MDK安装时注意勾选STM32F1的Device Family Pack用ST-Link Utility给开发板烧录Bootloader安装串口调试助手推荐XCOM V2.0我第一次搭建环境时踩过的坑ESP8266的AT固件版本必须大于1.6.2否则MQTT连接会异常。可以用以下AT指令检查版本ATGMR返回信息里版本号第三位数字大于6就能用。2. 传感器数据采集实战给STM32编程就像教小朋友做事情得把每个动作拆解得特别细。我们先从最简单的LED闪烁开始慢慢叠加功能。这里有个小技巧在Keil里创建工程时直接复制标准外设库例程中的GPIO配置部分能省去大量底层寄存器配置时间。DHT11的驱动要注意时序问题这个传感器对微秒级延时特别敏感。我调试时发现用SysTick定时器做延时最稳定代码片段如下void DHT11_Start(void) { GPIO_ResetBits(DHT11_PORT, DHT11_PIN); Delay_ms(20); GPIO_SetBits(DHT11_PORT, DHT11_PIN); Delay_us(30); }OLED显示建议采用U8g2图形库它支持中文显示和多种绘图功能。初始化时要特别注意I2C地址0.96寸屏通常是0x78或0x7A。遇到显示乱码时先检查是否调用了u8g2_SetFont函数中文字库是否正确烧录电源电压是否稳定在3.3V传感器数据采集的完整流程应该是DHT11读取→数据校验→OLED显示→存入缓冲区。我建议用环形缓冲区存储最近10组数据这样网络中断时也不会丢失关键数据。3. MQTT通信协议落地MQTT协议就像物联网世界的普通话我们要教会STM32说这门语言。ESP8266连接MQTT服务器需要三个关键信息服务器地址比如test.mosquitto.org设备ID建议用MAC地址后六位订阅/发布主题格式建议room/env_data在OneNET平台创建产品时有个隐藏技巧选择MQTT旧版协议比新版更稳定。设备鉴权信息中的API Key要转换成Token这个用在线工具就能完成。ESP8266的AT指令连接示例ATMQTTUSERCFG0,1,clientID,username,password,0,0, ATMQTTCONN0,mqtt.server.com,1883,1数据传输推荐用JSON格式虽然会多占几个字节但可读性好太多。cJSON库解析时要注意内存管理我习惯用静态内存分配char *json_str {\temp\:25.6,\humi\:62}; cJSON *root cJSON_Parse(json_str); float temp cJSON_GetObjectItem(root,temp)-valuedouble;遇到连接频繁断开的问题时可以增加心跳间隔建议60秒检查路由器MTU设置在代码中加入自动重连机制4. 微信小程序开发技巧微信小程序开发就像装修房子先搭框架再搞软装。建议从官方Demo项目开始改造能省去大量基础配置时间。我的项目结构是这样的/pages /index //主界面 /history //数据记录 /utils /mqtt.js //通信模块连接MQTT服务器推荐使用MQTT.js库注意要在小程序后台配置合法域名。建立连接的代码要放在onLoad生命周期里const client mqtt.connect(wxs://mqtt.server.com, { clientId: wx_ Math.random().toString(16).substr(2, 8), keepalive: 60 })数据可视化可以用wx-charts插件它支持实时曲线绘制。温度曲线更新有个小技巧用数组的push和shift方法实现滑动窗口效果this.data.tempData.push(newValue) if(this.data.tempData.length 30) { this.data.tempData.shift() }调试时经常遇到的坑真机调试必须开启HTTPS页面路由层级不能超过5层setData()单次设置数据不能超过1MB5. 系统联调与性能优化联调阶段就像乐队排练每个乐器都要跟上节拍。建议先用MQTT.fx工具模拟数据流验证小程序端解析逻辑是否正确。我常用的测试JSON结构{ device: F103-01, timestamp: 1689926400, data: { temp: 26.5, humi: 58, pm25: 12 } }STM32端的优化重点在电源管理开启ESP8266的PSM模式ATCIPSNCFG1调整传感器采集间隔DHT11最少2秒一次使用STOP模式降低待机功耗小程序端要注意渲染性能使用hidden替代wx:if控制显隐图片资源压缩到100KB以内避免在onPageScroll里执行复杂逻辑最后给三个实测有效的稳定性提升技巧ESP8266的TCP超时设为120秒ATCIPSTO120添加网络异常时的本地缓存机制在STM32端实现看门狗异常重启功能6. 项目扩展与进阶玩法基础功能跑通后可以尝试这些增强功能添加离线报警功能用蜂鸣器LED闪烁实现小程序远程控制下发指令开关LED接入天气API做数据对比我最近给系统加了这些功能异常数据自动标记连续3次超阈值触发微信消息推送通过订阅消息模板设备OTA升级用ESP8266的HTTP下载进阶开发者可以尝试改用FreeRTOS实现多任务管理移植到LoRa模块实现远距离传输接入TensorFlow Lite做边缘计算有个特别实用的调试方法在STM32端添加调试指令集通过串口输入命令可以查看内存状态、网络质量等信息。实现起来很简单if(strcmp(cmd,mem)0){ printf(Heap free: %d,xPortGetFreeHeapSize()); }