微信小程序连接服务器展示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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 消息推送php服务器验证实例详解

    微信小程序 消息推送php服务器验证实例详解 微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名 比如:

  • 微信小程序上传图片到服务器实例代码

    微信小程序上传图片到服务器实例代码

    上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <

  • 微信小程序上传多图到服务器并获取返回的路径

    微信小程序上传图片很简单: //点击选择图片 chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setD

  • 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

    微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

    本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能.分享给大家供大家参考,具体如下: 昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求. 微信小程序文档地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl 头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个.下面是app.json文件代码和相关注释 { &qu

  • 微信小程序上传图片到php服务器的方法

    本文实例为大家分享了微信小程序上传图片到php服务器的具体代码,供大家参考,具体内容如下 js代码如下 submitPhoto(){ var that = this; wx.uploadFile({ url: 'http://xxx.cn/upload.php', //仅为示例,非真实的接口地址 filePath: imagePath, name: 'imgfile', success: function (res) { var data = JSON.parse(res.data);; con

  • 根据服务器时间作为起始，显示时钟的小程序

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 我在做OA的一个考勤程序时,要动态显示服务器的时间,让员工知道当前是否可以下班,而客户机由于种种原因时间与服务器并不一致,所以不能用上面的代码,改进了一下: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 最后加上一个meizz的格式化函数(略有修正),最终版如下: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 本地搭建微信小程序服务器的实现方法

    本地搭建微信小程序服务器的实现方法

    本地搭建微信小程序服务器的实现方法 现在开发需要购买服务器,价格还是有点贵的,可以花费小代价就可以搭建一个服务器,可以用来开发小程序,博客等. 1.域名(备案过的)  2.阿里云注册免费的https证书  3.配置本地的nginx  4.内网映射(本地安装wampserver 服务器) 一.域名 注册花生壳,开通内网映射需要8元(我开通时需要,现在不清楚还要不要),里面可以注册2个免费的域名,都是免备案的.具体的请自行百度,花生壳注册地址 二.申请阿里云免费的https证书 阿里云免费的http

  • 微信小程序实现打开并下载服务器上面的pdf文件到手机

    谈一谈ios的bug: 关于ios系统的bug这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办法ios都是实现不了下载的,只能实现在线查看.所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没有哪一个小程序会不让你兼容ios的吧! 先看一下不兼容ios系统的下载柚子是怎么实现的吧: 首先我们需要在页面里写入一个按钮,用来触发pdf的打开和下载,写上点击事件 //查看并下载 See_download() { wx.downloadF

  • 微信小程序连接服务器展示MQTT数据信息的实现

    一. 实现工具--微信开发者工具 为何使用微信小程序作为展示? (1)范围广且能跨平台访问; (2)小而快能够快速的访问; 二. 实现步骤 1.总体大概: (1)界面设计:数据直观展示+历史数据+物联网调试信息 (2)连接服务器与回调 利用wx.request(Object object)发起 HTTPS 网络请求. 参数: url:开发者服务器接口地址: data:请求的参数: header:设置请求的 header,header 中不能设置 Referer. 成功连接将会调用success:

  • 微信小程序连接MySQL数据库的全过程

    微信小程序连接MySQL数据库的全过程

    目录 简要说明: 准备工作 MySQL配置数据库.数据表 目录结构 客户端代码实现 服务器端代码实现 效果展示 总结 简要说明: 承接上一个商品列表页,在服务器端连接MySQL数据库,通过条件匹配查寻数据并显示在客户端 准备工作 1.node.js 2.微信开发者工具 3.MySQL数据库 MySQL配置数据库.数据表 通过可视化的Workbench,可以很容易的建立自己的数据库.数据表.这里直接截个图就好了 推荐一个工具 Navicat for MySQL,以后可以通过它连接自己的数据库 目录

  • 微信小程序后台解密用户数据实例详解

     微信小程序后台解密用户数据实例详解 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识 因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的

  • uniapp,微信小程序中使用 MQTT的问题

    最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说明 MQTT的js文件:mqtt.min.js 先上一点注意事项: (1)MQTT.js 一个 MQTT 协议的客户端库,用 JavaScript 编写,可用于 Node.js 和浏览器.在 Node.js 端可以通过全局安装使用命令行连接,同时还支持 MQTT ,MQTT TLS 证书连接:值得一

  • 微信小程序开发之获取用户信息的两种方法

    微信小程序开发之获取用户信息的两种方法

    今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事件 --> <button type="default" bindtap="getUserInfor"> 登录</button> <!-- 展示获取到的用户信息 --> <image src="{{userinfor.avatar

  • 微信小程序 <swiper-item>标签传入数据

    微信小程序 <swiper-item>标签传入数据

    微信小程序 <swiper-item>标签传入数据 在<swiper-item>中用for循环传入多个成对不同数据时的实现方法. 看下效果图: 遍历实现方法:wxss省略: wxml中代码: <!--导航部分轮播图--> <swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration=&q

  • 微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>

  • 微信小程序实现展示评分结果功能

    本文实例为大家分享了微信小程序实现展示评分结果的具体代码,供大家参考,具体内容如下 星星评分展示1 根据评分展示整颗行星或者半颗星星 星星评分展示2 根据评分按照小数点展示整颗行星或者部分星星 wxml <view class="conmmentbox"> <view class="starbox"> <view class="stars2" style="width: 130rpx"> &

  • 微信小程序页面与组件之间信息传递与函数调用

    这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调用页面内的函数 1.页面如何向组件传数据 最常用,最规范的方式,设置数据监听器observer. ​ 假设在页面内引入了组件sc "usingComponents": { "sc":"" } ​ 想要配置一个监听器用来监听页面中数据list的变化,组件在页面中的写法如下: <sc list="

随机推荐