溫濕度遠(yuǎn)程監(jiān)控系統(tǒng)（ESP32+MQTT+小程序）完整的溫濕度遠(yuǎn)程監(jiān)控系統(tǒng)方案，包含硬件端、云端和小程序端的實(shí)現(xiàn)。系統(tǒng)架構(gòu)設(shè)計(jì)硬件端實(shí)現(xiàn)（ESP32）cpp#include<WiFi.h>#include<PubSubClient.h>#include<DHT.h>//WiFi配置constchar*ssid="your_wifi_ssid";constchar*password="your_wifi_password";//MQTT配置constchar*mqtt_server="your_mqtt_broker";constintmqtt_port=1883;constchar*mqtt_user="username";constchar*mqtt_password="password";//設(shè)備配置#defineDHTPIN4#defineDHTTYPEDHT22DHTdht(DHTPIN,DHTTYPE);WiFiClientespClient;PubSubClientclient(espClient);//主題定義constchar*temp_topic="sensor/temperature";constchar*humi_topic="sensor/humidity";constchar*status_topic="device/status";voidsetup_wifi(){delay(10);Serial.println();Serial.print("Connectingto");Serial.println(ssid);WiFi.begin(ssid,password);while(WiFi.status()!=WL_CONNECTED){delay(500);Serial.print(".");}Serial.println("");Serial.println("WiFiconnected");Serial.println("IPaddress:");Serial.println(WiFi.localIP());}voidreconnect(){while(!client.connected()){Serial.print("AttemptingMQTTconnection...");StringclientId="ESP32Client-";clientId+=String(random(0xffff),HEX);if(client.connect(clientId.c_str(),mqtt_user,mqtt_password)){Serial.println("connected");//發(fā)布設(shè)備在線狀態(tài)client.publish(status_topic,"online");}else{Serial.print("failed,rc=");Serial.print(client.state());Serial.println("tryagainin5seconds");delay(5000);}}}voidsetup(){Serial.begin(115200);dht.begin();setup_wifi();client.setServer(mqtt_server,mqtt_port);}voidloop(){if(!client.connected()){reconnect();}client.loop();//每10秒讀取一次傳感器數(shù)據(jù)staticunsignedlonglastMsg=0;unsignedlongnow=millis();if(now-lastMsg>10000){lastMsg=now;//讀取溫濕度floattemperature=dht.readTemperature();floathumidity=dht.readHumidity();//檢查讀取是否成功if(isnan(temperature)||isnan(humidity)){Serial.println("FailedtoreadfromDHTsensor!");return;}//發(fā)布數(shù)據(jù)到MQTTchartempString[8];charhumiString[8];dtostrf(temperature,1,2,tempString);dtostrf(humidity,1,2,humiString);client.publish(temp_topic,tempString);client.publish(humi_topic,humiString);Serial.print("Temperature:");Serial.print(tempString);Serial.print("°C,Humidity:");Serial.print(humiString);Serial.println("%");}}小程序前端實(shí)現(xiàn)html<!--pages/index/index.wxml--><viewclass="container"><viewclass="header"><textclass="title">溫濕度監(jiān)控系統(tǒng)</text><viewclass="status"><textclass="status-text">設(shè)備狀態(tài):{{connected?'在線':'離線'}}</text><viewclass="status-indicator{{connected?'online':'offline'}}"></view></view></view><viewclass="sensor-cards"><viewclass="cardtemperature"><viewclass="card-header"><textclass="card-title">溫度</text><textclass="card-unit">°C</text></view><viewclass="card-value">{{temperature||'--'}}</view><viewclass="card-time">{{tempTime||'--'}}</view></view><viewclass="cardhumidity"><viewclass="card-header"><textclass="card-title">濕度</text><textclass="card-unit">%</text></view><viewclass="card-value">{{humidity||'--'}}</view><viewclass="card-time">{{humiTime||'--'}}</view></view></view><viewclass="chart-section"><viewclass="section-title">歷史數(shù)據(jù)</view><canvascanvas-id="tempChart"class="chart"></canvas><canvascanvas-id="humiChart"class="chart"></canvas></view><viewclass="control-section"><buttonclass="btn{{connected?'btn-disconnect':'btn-connect'}}"bindtap="{{connected?'disconnectMQTT':'connectMQTT'}}">{{connected?'斷開連接':'連接設(shè)備'}}</button><buttonclass="btnbtn-refresh"bindtap="refreshData">刷新數(shù)據(jù)</button></view></view>javascript//pages/index/index.jsconstmqtt=require('../../utils/mqtt.min.js');Page({data:{connected:false,temperature:null,humidity:null,tempTime:null,humiTime:null,tempHistory:[],humiHistory:[],client:null},onLoad(){this.initChart();},onUnload(){this.disconnectMQTT();},connectMQTT(){constoptions={connectTimeout:4000,clientId:'wx_'+Math.random().toString(16).substr(2,8),username:'username',password:'password'};constclient=mqtt.connect('wxs://your-mqtt-broker/mqtt',options);client.on('connect',()=>{wx.showToast({title:'連接成功',icon:'success'});this.setData({connected:true});//訂閱主題client.subscribe('sensor/temperature');client.subscribe('sensor/humidity');client.subscribe('device/status');});client.on('message',(topic,message)=>{constvalue=parseFloat(message.toString());consttime=this.formatTime(newDate());if(topic==='sensor/temperature'){this.updateTemperature(value,time);}elseif(topic==='sensor/humidity'){this.updateHumidity(value,time);}});client.on('error',(error)=>{console.error('MQTTError:',error);wx.showToast({title:'連接失敗',icon:'none'});});this.setData({client});},disconnectMQTT(){if(this.data.client){this.data.client.end();this.setData({connected:false,client:null});wx.showToast({title:'已斷開連接',icon:'success'});}},updateTemperature(value,time){consttempHistory=[...this.data.tempHistory,{value,time}];if(tempHistory.length>20)tempHistory.shift();this.setData({temperature:value.toFixed(1),tempTime:time,tempHistory});this.drawChart('tempChart',tempHistory,'#ff6b6b','溫度');},updateHumidity(value,time){consthumiHistory=[...this.data.humiHistory,{value,time}];if(humiHistory.length>20)humiHistory.shift();this.setData({humidity:value.toFixed(1),humiTime:time,humiHistory});this.drawChart('humiChart',humiHistory,'#4ecdc4','濕度');},initChart(){//初始化圖表constsystemInfo=wx.getSystemInfoSync();this.chartWidth=systemInfo.windowWidth-40;this.chartHeight=200;},drawChart(canvasId,data,color,title){constctx=wx.createCanvasContext(canvasId);constwidth=this.chartWidth;constheight=this.chartHeight;if(data.length===0)return;//清空畫布ctx.clearRect(0,0,width,height);//繪制坐標(biāo)軸ctx.setStrokeStyle('#cccccc');ctx.setLineWidth(1);ctx.moveTo(30,20);ctx.lineTo(30,height-20);ctx.lineTo(width-10,height-20);ctx.stroke();//繪制數(shù)據(jù)線ctx.setStrokeStyle(color);ctx.setLineWidth(2);constvalues=data.map(item=>item.value);constmaxValue=Math.max(...values);constminValue=Math.min(...values);constrange=maxValue-minValue||1;data.forEach((item,index)=>{constx=30+(index/(data.length-1||1))*(width-40);consty=height-20-((item.value-minValue)/range)*(height-40);if(index===0){ctx.moveTo(x,y);}else{ctx.lineTo(x,y);}});ctx.stroke();//繪制標(biāo)題ctx.setFillStyle(color);ctx.setFontSize(12);ctx.fillText(title,40,15);ctx.draw();},refreshData(){if(this.data.client&&this.data.connected){//可以發(fā)送指令請(qǐng)求最新數(shù)據(jù)this.data.client.publish('device/control','refresh');wx.showToast({title:'刷新成功',icon:'success'});}else{wx.showToast({title:'請(qǐng)先連接設(shè)備',icon:'none'});}},formatTime(date){return`${date.getHours().toString().padStart(2,'0')}:${date.getMinutes().toString().padStart(2,'0')}:${date.getSeconds().toString().padStart(2,'0')}`;}});css/*pages/index/index.wxss*/.container{padding:20rpx;background:linear-gradient(135deg,#667eea0%,#764ba2100%);min-height:100vh;}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40rpx;}.title{font-size:36rpx;font-weight:bold;color:white;}.status{display:flex;align-items:center;background:rgba(255,255,255,0.2);padding:10rpx20rpx;border-radius:20rpx;}.status-text{font-size:24rpx;color:white;margin-right:10rpx;}.status-indicator{width:20rpx;height:20rpx;border-radius:50%;}.status-indicator.online{background:#4cd964;}.status-indicator.offline{background:#dd524d;}.sensor-cards{display:flex;justify-content:space-between;margin-bottom:40rpx;}.card{flex:1;background:white;border-radius:20rpx;padding:30rpx;margin:010rpx;box-shadow:010rpx30rpxrgba(0,0,0,0.1);}.card.temperature{border-top:8rpxsolid#ff6b6b;}.card.humidity{border-top:8rpxsolid#4ecdc4;}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20rpx;}.card-title{font-size:28rpx;color:#666;}.card-unit{font-size:24rpx;color:#9