前言

这是我在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", //湿度下限 
}

分析

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

1. 将字符串转换为json
   

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

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

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

3. 视图层逻辑判断渲染
   因为他对温度颜色有要求这里简单的根据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>

效果

由于写文章的时间有点晚了，我不打算将发送也写入，这里就对接收进行记录，现在是：20230710晚01：00

这是最后的图片，每次收到通讯数据，数据值都会改变，因为MQTT是双向通讯的

🍋推荐我的爬虫文章
《记一次云之家签到抓包》
《记一次视频抓包m3u8解密过程》
《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》
《Python】记录抓包分析自动领取芝麻HTTP每日免费IP（成品+教程）》
《某课抓包视频 安卓手机：黄鸟+某课app+VirtualXposed虚拟框架》

推荐专栏：

《Python爬虫脚本项目实战》

该专栏往期文章：
《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）》

🥦如果感觉看完文章还不过瘾，欢迎查看我的其它专栏
🥦作者对python有很大的兴趣，完成过很多独立的项目：例如滇医通等等脚本，但是由于版权的原因下架了，爬虫这一类审核比较严谨，稍有不慎就侵权违规了，所以在保证质量的同时会对文章进行筛选

如果您对爬虫感兴趣请收藏或者订阅该专栏哦《Python爬虫脚本项目实战》，如果你有项目欢迎联系我，我会同步教程到本专栏！

🚀Python爬虫项目实战系列文章！！
⭐⭐欢迎订阅⭐⭐

【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）
【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口

⭐⭐欢迎订阅⭐⭐