返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何利用微信小程序获取OneNet平台数据显示温湿度
  • 714
分享到

如何利用微信小程序获取OneNet平台数据显示温湿度

2024-04-02 19:04:59 714人浏览 安东尼
摘要

目录一、OneNet平台二、微信小程序界面设计三、微信小程序获取OneNet数据总结一、OneNet平台 ​ 1、我这里的设备是通过MQTT协议连接到OneNet平台的 ​ 2、微信

一、OneNet平台

​ 1、我这里的设备是通过MQTT协议连接到OneNet平台的

​ 2、微信小程序获取OneNet数据需要得到产品的api-key、设备id

​ 3、这里我是把温湿度都放在同一个设备,后面只需要查询一个设备即可获得两个数据

​ 4、查询OneNet平台多协议接入文档,这里直接查看MQtT的API使用

​ 5、我用ApiPost来进行测试是否能获取数据

二、微信小程序界面设计

1、index.wxml

<!--pages/index/index.wxml-->
<view  class= "content">
    <view  class= "zm">
    <text class="zm1">照明开关</text>
    <switch class="kai" checked="{{isChecked1}}" bindchange="changeSwitch1"/>
    </view>
    <view style="flex:1;width:100%">
     <label class="xia">
      <text class="zm1">排气扇开关</text>
      <switch class="kai" checked="{{isChecked1}}" bindchange="changeSwitch1"/>
     </label>
     </view>
    
     <view style="flex:1;width:100%">

       <label class="xia">
       <text class="zm1">当前温度:{{wendu}}°C</text>
       </label>

     </view>
     
     <view style="flex:1;width:100%">
     <label class="xia">
      <text class="zm1">当前湿度:{{shidu}} %</text>
     </label>
     </view>
     <button class="login-btn" bindtap="points" >显示温湿度</button>   
  </view>

​ 2、index.wxss


page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.headTitle{
   width: 100%;
   height: 80rpx;
   background-color: #ffffff;
   overflow:hidden  ;
   white-space:nowrap;   
   border-bottom :1px solid #F3F3F3;
}
.headTitle .titleItem{
  display: inline-block;
  line-height:80rpx;
  color: #889999;
  font-size:34rpx;
  margin: 0 20rpx;
}
.headTitle .selctItem{
  color: #000000;
  font-weight: bold;
}
.itemView{
  width: 100%;
  height:180rpx;
  position: relative;
  border-bottom: 1px solid #F3F3F3;
}
.zm{
  margin-top: 20rpx;
  border:1px solid#ebe4e286;
  width:750rpx;
  height: 100rpx;
  border-radius: 5px;
  font-size: 36;
  font-weight: bold;
  line-height: 80rpx;
  color: #32d5e0;
  text-align: center;
  display: flex;
  position: relative;

}
.login-btn{
  width: 40%!important;
  background-color: #33ff33;
  color: white;
  font-weight: nORMal;
}
.content{
  margin-top: 20rpx;
  border:1px solid#ebe4e286;
  width:750rpx;
  height: 600rpx;
  border-radius: 5px;
  font-size: 36;
  font-weight: bold;
  line-height: 80rpx;
  color: #32d5e0;
  text-align: center;
  flex-direction: column;
  display: flex;

}
.xia{
  justify-content: space-between;
}
.zm1{
  position: absolute; 
  left: 30rpx; 
}
.radio{
  display:inline-block; 

}
.kai{

  position: absolute; 
  right: 100rpx; 
  
}
.mos{
 
  left: 120rpx; 
  height: 200rpx;
}

​ 3、界面效果

三、微信小程序获取OneNet数据

​ 1、在wxml里面我给按钮添加了点击事件,命名为points,相对应的在index.js里面也需要添加相对应函数

 points:function(e) {
 
 
 },

​ 2、参考小程序文档,我这里采用wx.request 获取数据,这段数据获取也可以放在onLoad()函数里面,只不过显示效果没有按钮效果明显。然后还要设置不校验合法域名选项。

points:function(e) {
    var that = this
    wx.request({
       //设备ID
      //api-key
      url: 'Http://api.heclouds.com/devices/xxxxxxxxxx/datapoints?', //xxxxxxxxxx这里填写你的设备id
      header:{
        "api-key":"xxxxxxx"  //这里写你的api-key
      },
      data:{
        limit:1
      },
      method :"GET",
       //获取成功
      success:function(res){
       that.setData({
         shidu:res.data.data.datastreams[0].datapoints[0].value, //这里的shidu要跟wxml{{shidu}} 名字相同
         wendu:res.data.data.datastreams[1].datapoints[0].value,
       })    
      }
    })
  },

​ 3、关于如何显示到具体数字,因JSON数据而异,下面我这两行代码是根据Json数据来定位的

shidu:res.data.data.datastreams[0].datapoints[0].value, 
wendu:res.data.data.datastreams[1].datapoints[0].value,

4、效果展示

总结

到此这篇关于如何利用微信小程序获取OneNet平台数据显示温湿度的文章就介绍到这了,更多相关微信小程序显示温湿度内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何利用微信小程序获取OneNet平台数据显示温湿度

本文链接: https://lsjlt.com/news/143663.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何利用微信小程序获取OneNet平台数据显示温湿度
    目录一、OneNet平台二、微信小程序界面设计三、微信小程序获取OneNet数据总结一、OneNet平台 ​ 1、我这里的设备是通过MQTT协议连接到OneNet平台的 ​ 2、微信...
    99+
    2024-04-02
  • 怎么利用微信小程序获取OneNet平台数据显示温湿度
    小编给大家分享一下怎么利用微信小程序获取OneNet平台数据显示温湿度,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、OneNet平台我这里的设备是通过MQTT...
    99+
    2023-06-29
  • 微信小程序如何获取data数据
    微信小程序获取data数据的方法:1、在微信开发者工具中打开项目。2、在JS文件中添加获取data数据的函数方法。微信小程序获取data数据的方法:首先用微信开发者工具打开项目。在JS文件添加获取data数据的函数方法,具体代码如下所示:p...
    99+
    2024-04-02
  • IVX低代码平台——微信小程序获取用户信息
    写在前面 小程序可以通过方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。本文将向大家展示低代码开发:小程序实现获取用户信息的方法,供大家参考。 文章目录 写在前面开发概述准备工作用户组件发起小程序登录用户组件获...
    99+
    2023-08-17
    低代码 微信小程序 小程序
  • 微信小程序如何获取第三方平台自定义的数据字段
    这篇文章主要介绍了微信小程序如何获取第三方平台自定义的数据字段的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序如何获取第三方平台自定义的数据字段文章都会有所收获,下面我们一起来看看吧。wx.getExt...
    99+
    2023-06-26
  • 微信小程序页面如何获取数据
    微信小程序页面获取数据的案例:获取page数据,代码:var text=this.data.name ,这样就获取到初始化的值。page({data:{name:"test"},showData:function(){v...
    99+
    2024-04-02
  • 微信小程序如何获取微信运动步数
    这篇“微信小程序如何获取微信运动步数”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序如何获取微信运动步数”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让...
    99+
    2023-06-26
  • 微信小程序如何获取图片宽度与高度
    起源 最近在做A需求, 其中有个小功能点描述如下: 从配置端返回张图片, 期望宽度不变(750)、高度根据图片自适应. 我以为的 // 为便于讲解, 将css作为style属...
    99+
    2024-04-02
  • 微信小程序如何获取用户信息
    自我介绍 我是IT果果日记,微信公众号请搜索 IT果果日记 一个普通的技术宅,定期分享技术文章,欢迎点赞、关注和转发,请多关照。 微信小程序用户基本信息有哪些? 除了基本信息,微信还会提供openId和union...
    99+
    2023-09-05
    微信小程序 小程序 微信 Powered by 金山文档
  • 微信小程序中如何获取当前位置经纬度以及地图显示
    小编给大家分享一下微信小程序中如何获取当前位置经纬度以及地图显示,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!最近刚开始接触微信...
    99+
    2024-04-02
  • 微信小程序如何使用wxs计算获取到的数据
    这篇文章主要介绍“微信小程序如何使用wxs计算获取到的数据 ”,在日常操作中,相信很多人在微信小程序如何使用wxs计算获取到的数据 问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序如何使用wxs计算获...
    99+
    2023-06-26
  • 微信小程序直播如何获取用户openid参数
    本文小编为大家详细介绍“微信小程序直播如何获取用户openid参数”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序直播如何获取用户openid参数”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。接口说明:...
    99+
    2023-06-26
  • 微信小程序开发中如何获取用户信息
    这篇文章主要为大家展示了微信小程序开发中如何获取用户信息,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序开发中如何获取用户信息”这篇文章吧。wx.getUserInfo(OBJECT)获取...
    99+
    2023-06-26
  • 小程序如何获取第三方平台自定义的数据字段
    本文将为大家详细介绍“小程序如何获取第三方平台自定义的数据字段”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“小程序如何获取第三方平台自定义的数据字段”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体...
    99+
    2023-06-26
  • 微信小程序如何获取用户输入内容
    今天小编给大家分享一下微信小程序如何获取用户输入内容的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。小程序获取用户输入内容,可...
    99+
    2023-06-26
  • C#获取微信小程序的云数据库中数据的示例代码
    目录0 背景说明 0.1 获取AccessToken 0.2 数据库查询 0.3 文件下载 2. 简单的封装 3. 简单测试 4. 参考文档 0 背景说明 试水小程序,实现访客登记...
    99+
    2024-04-02
  • 微信小程序中如何使用wx.getImageInfo()获取图片信息
    本文将为大家详细介绍“微信小程序中如何使用wx.getImageInfo()获取图片信息”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“微信小程序中如何使用wx.getImageInfo()获取图片信息”能够给...
    99+
    2023-06-26
  • 微信小程序如何实现后台解密用户数据
    这篇文章主要介绍微信小程序如何实现后台解密用户数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 微信小程序后台解密用户数据实例详解openId : 用户在当前小程序的唯一...
    99+
    2024-04-02
  • 微信小程序如何授权获取用户详细信息openid
    这篇文章主要介绍微信小程序如何授权获取用户详细信息openid,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序获取用户的头像昵称openid之类第一种使用wx.getUserIn...
    99+
    2024-04-02
  • Thinkphp5微信小程序如何实现获取用户信息接口
    这篇文章主要为大家展示了“Thinkphp5微信小程序如何实现获取用户信息接口”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Thinkphp5微信小程序如何实现...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作