【MQTT】Esp32数据上传采集：最新mqtt插件（支持掉线、真机调试错误等问题）-阿里云开发者社区

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

2023-10-18 81

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

前言

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