微信小程序连接服务器展示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 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
vue webpack重写cookie路径的方法
Jul 10 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
详解Python的三种拷贝方式
2020/02/11 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
网络工程师自荐书范文
2014/04/01 职场文书
团日活动总结书格式
2014/05/08 职场文书
公司贷款承诺书
2014/05/30 职场文书
学雷锋倡议书
2015/01/19 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL