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


Posted in Javascript onJuly 14, 2020

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

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

二、 实现步骤

1、总体大概:

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

参数:

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

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

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

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

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

2、细节展示

A、数据展示界面

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

状态:

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

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

温湿度:

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

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

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

B、历史记录展示界面

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

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

C、物联网调试信息界面

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

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

步骤:

a、创建物联网平台

选择物联网平台

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

给产品命名

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

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

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

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

c、检验连接是否成功

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

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

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

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

(关于更多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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
js快速排序的实现代码
Dec 08 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
详解javascript void(0)
Jul 13 #Javascript
Vue组件间数据传递的方式(3种)
Jul 13 #Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 #Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 #Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 #Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 #Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 #Javascript
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
php zend 相对路径问题
2009/01/12 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
Python 的 Socket 编程
2015/03/24 Python
python3处理含有中文的url方法
2018/05/10 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Python学习之time模块的基本使用
2021/01/17 Python
学年末自我鉴定
2014/01/21 职场文书
班队活动设计方案
2014/01/30 职场文书
自立自强的名人事例
2014/02/10 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
广告创意求职信
2014/03/17 职场文书
药剂专业自荐书
2014/06/20 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
员工工作表现自我评价
2015/03/06 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
Mysql文件存储图文详解
2021/06/01 MySQL