Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use WeChat Mini Programs to obtain OneNet platform data to show temperature and humidity, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

I. OneNet platform

1. My equipment here is connected to the OneNet platform through MQTT protocol.

2. WeChat Mini Programs needs to get the api-key and device id of the product to obtain OneNet data.

3. Here I put the temperature and humidity on the same device, and then I only need to query one device to get two data.

4. Query the documents of multi-protocol access on OneNet platform. Check the API usage of MQTT directly here.

5. I use ApiPost to test whether I can get the data

Second, WeChat Mini Programs interface design

1 、 index.wxml

Lighting switch exhaust fan switch current temperature: {{wendu}} °C current humidity: {{shidu}}% display temperature and humidity

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; / * * set beyond content hiding * / white-space:nowrap; / * setting exceeds line wrapping * / border-bottom: 1px solid # F3F3F3;} .headTitle .titleItem {display: inline-block Line-height:80rpx; color: # 889999; font-size:34rpx; margin: 020rpx;} .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;/* parent element position should be set to relative * /}. Login-btn {width: 40% importance; 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; / * to constrain the location of the child elements should be set to absolute * / left: 30rpx; / * adjust to the right * /} .radio {display:inline-block; / * horizontal layout * /} .kai {position: absolute / * to constrain the position of the child elements, set the position to absolute * / right: 100rpx; / * adjust to the right * /} .mos {left: 120rpx; / * adjust to the right * / height: 200rpx;}

3. Interface effect

WeChat Mini Programs obtains OneNet data

1. I added a click event to the button in wxml, which is named points, and the corresponding function needs to be added in index.js.

Points:function (e) {}

2. Refer to the Mini Program documentation. I use wx.request to obtain data here, and this data acquisition can also be placed in the onLoad () function, but the display effect is not as obvious as the button effect. Then set the option of not verifying legitimate domain names.

Points:function (e) {var that = this wx.request ({/ / device ID / / api-key url: 'http://api.heclouds.com/devices/xxxxxxxxxx/datapoints?', / / xxxxxxxxxx fill in your device id header: {"api-key": "xxxxxxx" / / write your api-key} here, data: {limit:1} Method: "GET", / / obtain successful success:function (res) {that.setData ({shidu:res.data.data.datastreams [0] .datapoints [0] .value, / / shidu with the same name as wxml {{shidu}} wendu:res.data.data.datastreams [1] .datapoints [0] .value,})}

3. How to display specific numbers varies according to Json data. The following two lines of code are based on Json data.

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

4. Effect display

The above is all the contents of the article "how to use WeChat Mini Programs to obtain OneNet platform data to display temperature and humidity". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.