如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度
一、OneNet平臺(tái)
? 1、我這里的設(shè)備是通過(guò)MQTT協(xié)議連接到OneNet平臺(tái)的
? 2、微信小程序獲取OneNet數(shù)據(jù)需要得到產(chǎn)品的api-key、設(shè)備id
? 3、這里我是把溫濕度都放在同一個(gè)設(shè)備,后面只需要查詢一個(gè)設(shè)備即可獲得兩個(gè)數(shù)據(jù)
? 4、查詢OneNet平臺(tái)多協(xié)議接入文檔,這里直接查看MQTT的API使用
? 5、我用ApiPost來(lái)進(jìn)行測(cè)試是否能獲取數(shù)據(jù)
二、微信小程序界面設(shè)計(jì)
1、index.wxml
<!--pages/index/index.wxml--> <view class= "content"> <view class= "zm"> <text class="zm1">照明開關(guān)</text> <switch class="kai" checked="{{isChecked1}}" bindchange="changeSwitch1"/> </view> <view style="flex:1;width:100%"> <label class="xia"> <text class="zm1">排氣扇開關(guān)</text> <switch class="kai" checked="{{isChecked1}}" bindchange="changeSwitch1"/> </label> </view> <view style="flex:1;width:100%"> <label class="xia"> <text class="zm1">當(dāng)前溫度:{{wendu}}°C</text> </label> </view> <view style="flex:1;width:100%"> <label class="xia"> <text class="zm1">當(dāng)前濕度:{{shidu}} %</text> </label> </view> <button class="login-btn" bindtap="points" >顯示溫濕度</button> </view>
? 2、index.wxss
/* pages/index/index.wxss */ page { background: #f6f6f6; display: flex; flex-direction: column; justify-content: flex-start; } .headTitle{ width: 100%; height: 80rpx; background-color: #ffffff; overflow:hidden ;/** 設(shè)置超出內(nèi)容隱藏 */ white-space:nowrap; /*設(shè)置超出不換行 */ 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;/*父元素位置要設(shè)置為相對(duì)*/ } .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; /* 要約束所在位置的子元素的位置要設(shè)置成絕對(duì) */ left: 30rpx; /* 靠右調(diào)節(jié) */ } .radio{ display:inline-block; /* 橫向布局*/ } .kai{ position: absolute; /* 要約束所在位置的子元素的位置要設(shè)置成絕對(duì) */ right: 100rpx; /* 靠右調(diào)節(jié) */ } .mos{ left: 120rpx; /* 靠右調(diào)節(jié) */ height: 200rpx; }
? 3、界面效果
三、微信小程序獲取OneNet數(shù)據(jù)
? 1、在wxml里面我給按鈕添加了點(diǎn)擊事件,命名為points,相對(duì)應(yīng)的在index.js里面也需要添加相對(duì)應(yīng)函數(shù)
points:function(e) { },
? 2、參考小程序文檔,我這里采用wx.request 獲取數(shù)據(jù),這段數(shù)據(jù)獲取也可以放在onLoad()函數(shù)里面,只不過(guò)顯示效果沒(méi)有按鈕效果明顯。然后還要設(shè)置不校驗(yàn)合法域名選項(xiàng)。
points:function(e) { var that = this wx.request({ //設(shè)備ID //api-key url: 'http://api.heclouds.com/devices/xxxxxxxxxx/datapoints?', //xxxxxxxxxx這里填寫你的設(shè)備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、關(guān)于如何顯示到具體數(shù)字,因Json數(shù)據(jù)而異,下面我這兩行代碼是根據(jù)Json數(shù)據(jù)來(lái)定位的
shidu:res.data.data.datastreams[0].datapoints[0].value, wendu:res.data.data.datastreams[1].datapoints[0].value,
4、效果展示
總結(jié)
到此這篇關(guān)于如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度的文章就介紹到這了,更多相關(guān)微信小程序顯示溫濕度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中實(shí)現(xiàn)函數(shù)return多個(gè)返回值的實(shí)例
下面小編就為大家?guī)?lái)一篇JS中實(shí)現(xiàn)函數(shù)return多個(gè)返回值的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實(shí)現(xiàn)方法
這篇文章主要介紹了JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-02-02underscore之function_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
因?yàn)閡nderscore本來(lái)就是為了充分發(fā)揮JavaScript的函數(shù)式編程特性,所以也提供了大量JavaScript本身沒(méi)有的高階函數(shù)。本文重點(diǎn)給大家介紹underscore之function知識(shí),感興趣的的朋友一起學(xué)習(xí)吧2017-07-07BootStrap便簽頁(yè)的簡(jiǎn)單應(yīng)用
本文通過(guò)實(shí)例代碼給大家簡(jiǎn)單介紹了bootstrap便簽頁(yè)的簡(jiǎn)單應(yīng)用,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-01-01ES6解構(gòu)賦值(數(shù)組,對(duì)象,函數(shù))使用詳解
這篇文章主要介紹了ES6解構(gòu)賦值(數(shù)組,對(duì)象,函數(shù))使用詳解,JavaScript 中最常用的兩種數(shù)據(jù)結(jié)構(gòu)是 Object 和 Array,解構(gòu)操作對(duì)那些具有很多參數(shù)和默認(rèn)值等的函數(shù)也很奏效,本文通過(guò)實(shí)例代碼詳細(xì)講解需要的朋友可以參考下2022-11-11JS 截取字符串substr 和 substring方法的區(qū)別
JS 截取字符串substr 和 substring方法的區(qū)別,需要的朋友可以參考下,根據(jù)需要自行選擇。2009-10-10簡(jiǎn)介alert()與console.log()的不同
alert()和console.log()在程序中經(jīng)常會(huì)用到,大家知道他們的區(qū)別嗎,接下來(lái),通過(guò)本文給大家介紹alert()與console.log()的不同,需要的朋友可以參考下2015-08-08