微信小程序连接服务器展示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);
拿到最新数据渲染在自己设计的View中。
微信小程序连接服务器展示MQTT数据信息相关推荐
- 微信小程序连接展示MQTT数据信息
一. 实现工具--微信开发者工具 为何使用微信小程序作为展示? (1) 范围广且能跨平台访问; (2) 小而快能够快速的访问; 二. 实现步骤 1. 总体大概: (1) 界面设计:数据直观展示+历史数 ...
- 微信小程序连接蓝牙模块发送数据的详解以及封装版
连接蓝牙 前言 详解 小程序链接蓝牙流程图 需要的数据 api openBluetoothAdapter:打开蓝牙适配器 getBluetoothAdapterState:查看蓝牙适配器状态 star ...
- 肯德基微信小程序连接服务器异常,微信小程序平台常见问题及解决方案
原标题:微信小程序平台常见问题及解决方案 现在越来越多的人开始制作自己的小程序,但由于缺少经验,以及对微信小程序平台缺乏了解,会犯一些低级错误,导致自己制作小程序的时候频频受阻.这里我列举了一些常见问 ...
- 基于EMQX云服务器的环境调节系统(微信小程序连接MySQL篇)
文章目录 1.宝塔上创建mysql数据库 2.连接mysql数据库 3.微信小程序连接数据库和插入数据 4.微信小程序获取数据库最新多条数据 5.数据可视化 1.宝塔上创建mysql数据库 选择创建网 ...
- 微信小程序连接蓝牙 并分包发送 接收数据完整版
微信小程序连接蓝牙并分包发送接收数据 初始化蓝牙 初始化蓝牙设备 搜索蓝牙设备 连接蓝牙设备 获取蓝牙设备所有service(支持读写的) 向蓝牙发送数据 断开蓝牙 停止搜索蓝牙 转16进制 Arra ...
- 微信小程序连接emqx服务器实现数据交互
微信小程序连接emqx服务器实现数据交互 emqx 申请链接 EMQX 是一款全球下载量超千万的开源物联网MQTT 服务器,高效可靠连接海量物联网设备,高性能实时处理消息与事件流数据,可运行在公有云. ...
- 微信和mqqt服务器,微信小程序连接MQTT服务器实现控制Esp8266LED灯
上一篇文章已实现Esp8266开发板与MQTT服务器连接实现控制LED灯 这篇文章记录继上篇的功能接入微信小程序实现LED灯的控制 先理解一个概念:微信小程序订阅MQTT服务器一个主题,Esp8266 ...
- 微信小程序连接物联网(三):微信小程序远程遥控宿舍开门 基于NodeMCU通过MQTT协议连接阿里云物联网平台
索引 这是用微信小程序遥控开门的系列文章,具体微信小程序连接物联网的代码在第三章提及. 微信小程序连接物联网(一):初始化ESP8266 NodeMCU 微信小程序连接物联网(二):NodeMCU L ...
- 微信小程序连接阿里云物联网平台操控设备(IOT)三
文章导航: 微信小程序连接阿里云物联网平台操控设备(IOT)一 设备上云 微信小程序连接阿里云物联网平台操控设备(IOT)二 微信小程序开发(一) 微信小程序连接阿里云物联网平台操控设备(IOT)三 ...
最新文章
- mysql gfs2_Mysql_HA+IP_SAN+Clvmd+GFS2
- linux uname 命令详解
- python numpy中ndarray.reshape函数参数-1是什么意思?(模糊控制、自动推理)
- CodeForces - 1450C2 Errich-Tac-Toe (Hard Version)(思维+构造)
- java date postmax_Postman支持的几种数据类型请求方式
- 【SpringMVC学习07】SpringMVC中的统一异常处理
- 面象对象与面象过程内存分区
- ppt 计算机图标不见了,电脑ppt图标不见了怎么办
- Android航海航线地图,航海王热血航线东南之海宝藏一览
- ios 裁剪框大小_ios – 如何将视频裁剪为特定大小?
- NW.js之基础篇(2)
- mysql 合计 小计_用SQL实现统计报表中的小计与合计的方法详解
- [收藏]家用三线插座(220V单相)正确接线方法
- 3轴/6轴/9轴传感器是什么, 加速计/陀螺仪/磁力计又是什么?
- 卸载微软的拼音输入法
- 道一云与畅捷通T+对接集成获取报销信息列表=>凭证创建
- nginx - nginx的安装部署
- 蜂蜜梨文案:销售水果蜂蜜梨文案,朋友圈水果文案蜂蜜梨
- XSSFWorkbook 设置单元格样式_6.6 使用单元格样式
- ICLR 2022杰出论文奖出炉!清华、人大获奖!浙大提名
热门文章
- 指定wsus服务器,WSUS 服务器的搭建;
- JavaSE基础加强(面向对象进阶)
- Camtasia 2023破解激活版免费下载附序列号激活码
- 什么是工作流管理系统(WFMS)
- 相机标定和ORBSLAM2/VINS测试
- 福建警院计算机系老师,许发见(计算机与信息管理系)老师 - 福建警察学院 - 院校大全...
- 【模块三:职业成长】38|能力维度三:如何提升解决跨领域冲突的能力?
- 每日一问之鞍点(saddle point)
- java springboot微信小程序授权登录
- java fx svg 图像 缩放 控件_SVG(可缩放矢量图形)