【MQTT】Esp32数据上传采集：最新mqtt插件（支持掉线、真机调试错误等问题）

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言

在这里插入图片描述
这是我在Dcloud发布的插件-最完整Mqtt示例代码解决掉线、真机调试错误等问题经过整改优化和替换Mqtt的js文件使一些市场上出现的问题得以解决至于跨端出问题可能原因有很多例如合法域名或者是wss证书没有配置等等若你们的还是没办法使用找下自己的问题因为我使用这个插件完整的测试了微信小程序、H5、APP 这三个不同的端是没有任何问题的另外我的MQTT相关文章在这里

《Esp8266-01s、51单片机实现连接MQTT踩坑附加烧录安信可固件+宝塔搭建MQTT服务器全套攻略》
《解决微信小程序MQTT通讯真机调试失败的问题附加可用代码》
《解决微信小程序MQTT真机连接问题与合法域名配置SSL问题》
《一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)》

以上就是我对MQTT的学习记录分析包括反向代理配置ws证书、ws和wx协议的区别等等文章都是近期的有关联性可以看看

最近在忙着处理毕业的事情一直没有接项目所以就没有更新文章这次这个也不能算是项目但是人家有需求150软妹币帮忙解决了大概意思就是通过esp32发送机器的温度数据要能在小程序或者H5上能看到面板并且能主动发送设定值给单片机大概就是这个意思另外单片机那里他都已经处理好了我也就是写个接收而已废话不多少开搞

接收和发送数据JSON格式化

在这里插入图片描述

客户给的两个Json格式的数据
单片机发送的

{
"wd": "00" //实时温度
"wdyj": "0" //温度预警0正常 1预警实时温度变红
"sd": "00" //实时湿度
"sdyj": "0" //湿度预警0正常 1预警实时湿度变红 
}

发送给单片机的

{
"wdsx": "40.00", //温度上限
"wdxx": "10.00", //温度下限
"wdkg": "0", //温度预警邮件开关 0开 1关
"sdsx": "50.00", //湿度上限
"sdxx": "60.00", //湿度下限 
}

分析

可以看出根本就不难接收到的数据处理一下渲染即可继续往下

将字符串转换为json

let jsonObj = JSON.parse(this.receiveMessage);

将数据传递到data中的receive中去

let jsonObj = JSON.parse(this.receiveMessage);
this.receive=jsonObj;

视图层逻辑判断渲染
因为他对温度颜色有要求这里简单的根据if语句判断下面是代码

<view>
			<text v-if="receive.wdyj=='1'" style="color: red;">实时温度{{receive.wd}}</text>
			<text v-else>实时温度{{receive.wd}}</text>
			<br>
			<text v-if="receive.wdyj=='0'">温度预警正常</text>
			<text v-if="receive.wdyj=='1'">温度预警预警</text>
			<text v-else>温度预警</text>
			<br>
			<text v-if="receive.sdyj=='0'">实时湿度{{receive.sd}}</text>
			<text v-else>实时湿度{{receive.sd}}</text>
			<br>
			<text>湿度预警{{receive.sdyj}}</text>
			<br>
		</view>