您的位置：首页 > 编程技术 > js  >  微信小程序连接服务器展示MQTT数据信息的实现

微信小程序连接服务器展示MQTT数据信息的实现

 更新时间：2020年7月14日 11:26  点击：1815

一、 实现工具——微信开发者工具

为何使用微信小程序作为展示？
（1）范围广且能跨平台访问;
（2）小而快能够快速的访问;

二、 实现步骤

1、总体大概：

（1）界面设计：数据直观展示+历史数据+物联网调试信息
（2）连接服务器与回调
利用wx.request(Object object)发起 HTTPS 网络请求。

参数：

  • url：开发者服务器接口地址；
  • data：请求的参数；
  • header：设置请求的 header，header 中不能设置 Referer。

成功连接将会调用success: function (res) {}函数，我们可以利用console.log(res.data)打印出服务器传来的数据Var一个that新的this变量将我们传来的数据以列表保存。

服务器连接失败会调用fail: function (err)函数，并通过{console.log(err)}打印出错误信息。

2、细节展示

A、数据展示界面

状态：


此处利用条件渲染绑定服务器传来的开关值，利用图片直观展示开关情况。

温湿度：



温度和湿度通过对列表遍历得到最新的值显示在自己设置的view。

B、历史记录展示界面

利用循环渲染将每次获取到的列表展示。同时调用服务器接受传来的时间准确直观展示每一次的历史数据。

C、物联网调试信息界面

我们如果使用lot调试设备将会在此界面展示调试信息：

步骤：

a、创建物联网平台

选择物联网平台

点击设备管理，选择产品，创建产品

给产品命名

在标准品类，选择智能生活，选择灯；节点类型选择直连设备 ；连网方式选择WIFI；数据格式选择ICA标准数据类型；保存

然后在产品下创建一个设备微信端；点击设备；添加设备；产品选择刚建立的产品；再给设备命名；点击确认

b、代码替换三元组与订阅发布主题

c、检验连接是否成功

回调成功以弹窗方式展示：

当服务器连接异常进行错误函数回调并打印错误信息：

（关于更多lotl连接请点击我参考的大佬博客：只要会用电脑就能看懂的物联网教程（阿里云+esp8266+微信小程序）
）

3 出现错误及改正

A.自定义订阅主题不被识别
解决方法：点击规则引擎的云产品流传发现创建规则数据格式选择二进制格式，改为JSON格式解决
B.控制台打印错误：Please do not call Page constructor in files that not listed in"pages" sect
解决方法：用来测试的界面app.js文件不能加Page({}) 会有引用错误。加上即解决。
C.小程序无法从服务器拿到最新的测试数据
解决方法：服务器创建新API，更改sql语句

select * from mqtt where id = (select max(id) from mqtt);

拿到最新数据渲染在自己设计的View中。

到此这篇关于微信小程序连接服务器展示MQTT数据信息的实现的文章就介绍到这了,更多相关小程序连接服务器展示MQTT内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • 微信小程序 页面传值详解

    这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13

  • uniapp微信小程序:key失效的解决方法

    这篇文章主要介绍了uniapp微信小程序:key失效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-20

  • 分享一段php获取linux服务器状态的代码

    简单的php获取linux服务器状态的代码，不多说-直接上函数：复制代码 代码如下:function get_used_status(){ $fp = popen('top -b -n 2 | grep -E "^(Cpu|Mem|Tasks)"',"r");//获取某一时刻系统cpu和内存使用情况 $rs =...2014-05-31

  • Springboot+TCP监听服务器搭建过程图解

    这篇文章主要介绍了Springboot+TCP监听服务器搭建过程，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-28

  • PHP常用的小程序代码段

    本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24

  • 微信小程序自定义tabbar组件

    这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14

  • 微信小程序二维码生成工具 weapp-qrcode详解

    这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下...2021-10-23

  • 微信小程序 网络请求(GET请求)详解

    这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22

  • 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10

  • 服务器 UDP端口占用几千个的解决办法

    前一段时间使用NetStat命令查看服务器端口时,发现服务器udp端口开放了好多,最少在1000个以上,当时事情比较多,没有管它,今天终于有点时间,仔细检查了一下,排除了这个问题. ...2016-01-27

  • Python爬取微信小程序通用方法代码实例详解

    这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29

  • 微信小程序（应用号）开发新闻客户端实例

    这篇文章主要介绍了微信小程序（应用号）开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25

  • PHP连接公司内部服务器的MYSQL数据库的简单实例

    “主机，用户名，密码”得到连接、“数据库，sql，连接”得到结果，最后是结果的处理显示。当然，数据库连接是扩展库为我们完成的，我们能做的仅仅是处理结果而已。...2013-09-29

  • 微信小程序手势操作之单触摸点与多触摸点

    这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13

  • js有序数组的连接问题

    1.前言 昨天碰到一道关于如何解决有序数组的连接问题，这是一个很常见的问题。但是这里要考虑到代码的效率问题，因为要连接的数组都是有序的，这是一个非常重要的前提条件。2.简单但效率不高的算法 我首先想到的是使用...2013-10-04

  • 解决HttpPost+json请求---服务器中文乱码及其他问题

    这篇文章主要介绍了解决HttpPost+json请求---服务器中文乱码及其他问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-22

  • 微信小程序 页面跳转传递值几种方法详解

    这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16

  • 微信小程序实现canvas分享朋友圈海报

    这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-21

  • 手把手教你uniapp和小程序分包(图文)

    本文主要介绍了手把手教你uniapp和小程序分包，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-02

  • 微信小程序实现点击导航条切换页面

    这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-11-19