微信小程序连接服务器展示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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
全面分析JavaScript 继承
May 30 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP导入导出Excel代码
2015/07/07 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现简单截取中文字符串的方法
2015/06/15 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python环境下安装opencv库的方法
2020/03/05 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
const和static readonly区别
2013/05/20 面试题
事业单位辞职信范文
2014/01/19 职场文书
关于旷工的检讨书
2014/02/02 职场文书
小学英语教学反思案例
2014/02/04 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
三年级学生评语大全
2014/12/26 职场文书
公司岗位说明书
2015/10/08 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书