微信小程序连接展示MQTT数据信息
一、 实现工具——微信开发者工具
为何使用微信小程序作为展示?
(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);
- 1
拿到最新数据渲染在自己设计的View中。
微信小程序连接展示MQTT数据信息相关推荐
- 微信小程序连接服务器展示MQTT数据信息
一. 实现工具--微信开发者工具 为何使用微信小程序作为展示? (1) 范围广且能跨平台访问; (2) 小而快能够快速的访问; 二. 实现步骤 1. 总体大概: (1) 界面设计:数据直观展示+历史数 ...
- 使用微信小程序连接到 MQTT 云服务
微信小程序是腾讯于 2017 年 1 月 9 日推出的一种不需要下载安装即可在微信平台上使用的应用程序,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是 ...
- 微信小程序连接emqx服务器实现数据交互
微信小程序连接emqx服务器实现数据交互 emqx 申请链接 EMQX 是一款全球下载量超千万的开源物联网MQTT 服务器,高效可靠连接海量物联网设备,高性能实时处理消息与事件流数据,可运行在公有云. ...
- 微信小程序连接物联网(三):微信小程序远程遥控宿舍开门 基于NodeMCU通过MQTT协议连接阿里云物联网平台
索引 这是用微信小程序遥控开门的系列文章,具体微信小程序连接物联网的代码在第三章提及. 微信小程序连接物联网(一):初始化ESP8266 NodeMCU 微信小程序连接物联网(二):NodeMCU L ...
- 微信小程序连接蓝牙 并分包发送 接收数据完整版
微信小程序连接蓝牙并分包发送接收数据 初始化蓝牙 初始化蓝牙设备 搜索蓝牙设备 连接蓝牙设备 获取蓝牙设备所有service(支持读写的) 向蓝牙发送数据 断开蓝牙 停止搜索蓝牙 转16进制 Arra ...
- 微信和mqqt服务器,微信小程序连接MQTT服务器实现控制Esp8266LED灯
上一篇文章已实现Esp8266开发板与MQTT服务器连接实现控制LED灯 这篇文章记录继上篇的功能接入微信小程序实现LED灯的控制 先理解一个概念:微信小程序订阅MQTT服务器一个主题,Esp8266 ...
- 微信小程序连接阿里云物联网平台操控设备(IOT)三
文章导航: 微信小程序连接阿里云物联网平台操控设备(IOT)一 设备上云 微信小程序连接阿里云物联网平台操控设备(IOT)二 微信小程序开发(一) 微信小程序连接阿里云物联网平台操控设备(IOT)三 ...
- 微信小程序连接蓝牙打印机打印图片示例
微信小程序连接蓝牙打印机示例 完整的代码示例请点击看github 小程序连接蓝牙打印机打印文本与二维码等示例在 github 上都能找到一些,唯独打印图片这个案例几乎没有.希望能帮助到有打印图片需求的 ...
- 微信小程序连接MySQL数据库
微信小程序连接MySQL数据库 简要说明: 承接上一个商品列表页,在服务器端连接MySQL数据库,通过条件匹配查寻数据并显示在客户端 准备工作 1.node.js 2.微信开发者工具 3.MySQL数 ...
最新文章
- 一致性哈希算法及其在分布式系统中的应用
- Android onclicklistener中使用外部类变量时为什么需要final修饰【转】
- 2020 操作系统第一天复习(习题总结)
- mysql ibatis xml配置 like_iBatis学习方法及入门总结
- 生日快乐程序_别@官方了!云开发教你制作个性头像小程序,以后过节想加啥就加啥!...
- linux修改主机名后oracle em控制台起不来,更改计算机名后导致Oracle dbconsole无法启动问题解决方法...
- mysql安装开始报错_MYSQL安装报错 -- 出现Failed to find valid data directory.
- 2008-2013年工业企业数据库(EXCEL)
- 移动端IOS自动化测试框架搭建-无坑
- [4G5G专题-34]:物理层-浅谈m序列的原理以及在NR PSS中的应用
- mysql判断是否为分区表_MySQL 分区表
- 你想要的宏基因组-微生物组知识全在这(2021.12)
- 记解决win10报错“任务管理器已被管理员禁用”
- oa怎么修改服务器地址,致远oa如何设置服务器地址
- 转:一位10年Java工作经验的架构师聊Java和工作经验
- html显示隐藏图片,简单的图片显示与隐藏
- 随机误差与Allan方差的理解
- 快手双核心时代宣告结束,互联网“退休潮”还在继续?
- 牛顿后插matlab,大神求解析程序~~关于牛顿插值多项式的matlab程序
- java日期与时间戳相互转换大全