如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度
一、OneNet平臺(tái)
? 1、我這里的設(shè)備是通過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來進(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ù)里面，只不過顯示效果沒有按鈕效果明顯。然后還要設(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ù)來定位的
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)文章
整理Javascript函數(shù)學(xué)習(xí)筆記
整理Javascript函數(shù)學(xué)習(xí)筆記，之前一系列的文章是跟我學(xué)習(xí)Javascript，本文就是進(jìn)一步學(xué)習(xí)Javascript函數(shù)，希望大家繼續(xù)關(guān)注2015-12-12
return false,對(duì)阻止事件默認(rèn)動(dòng)作的一些測(cè)試代碼
很明顯我們每個(gè)函數(shù)都返回false,如果返回值可以阻止事件默認(rèn)動(dòng)作，那么文本框?qū)o法輸入任何內(nèi)容。 看下面我測(cè)試的結(jié)果，注意紅的部分。2010-11-11
JavaScript面向?qū)ο缶幊虒?shí)現(xiàn)模擬
面向?qū)ο缶幊?Object Oriented Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬2022-10-10
這篇文章主要給大家介紹了關(guān)于js原型鏈的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
原生js實(shí)現(xiàn)移動(dòng)開發(fā)輪播圖、相冊(cè)滑動(dòng)特效
原生JS實(shí)現(xiàn)圖片自動(dòng)輪播緩沖切換特效，很實(shí)用流暢的圖片輪播特效，在較現(xiàn)代的瀏覽器上展現(xiàn)的圓角效果，兼容差點(diǎn)的是直角效果，全部原生JS實(shí)現(xiàn)，還是很不錯(cuò)的值得大家學(xué)習(xí)并利用，推薦下載。2015-04-04
javascript實(shí)現(xiàn)tab切換的兩個(gè)實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)tab切換的兩個(gè)實(shí)例，是對(duì)之前方法原理的進(jìn)一步延伸，需要深入了解的同學(xué)可以參考一下2015-11-11
一個(gè)可以得到元素真實(shí)的背景顏色的javascript腳本
微信小程序?qū)崿F(xiàn)指定顯示行數(shù)多余文字去掉用省略號(hào)代替
JS中字符問題(二進(jìn)制/十進(jìn)制/十六進(jìn)制及ASCII碼之間的轉(zhuǎn)換)