微信小程序连接服务器展示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 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
javascript内存管理详细解析
Nov 11 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python模拟用户登录验证
2017/09/11 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python opencv实现运动检测
2018/07/10 Python
Python引用计数操作示例
2018/08/23 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
多个python文件调用logging模块报错误
2020/02/12 Python
如何卸载python插件
2020/07/08 Python
PHP高级工程师面试问题推荐
2013/01/18 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
语文教研活动总结
2014/07/02 职场文书
生物工程专业求职信
2014/09/03 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
简爱电影观后感
2015/06/10 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers