掌握IoT：掌控板+微信小程序实时显示光照值 🌞💡

OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据

2019-12-027415

云天

UID: 1934

577文章

178粉丝

1611获取喜欢

AI 快速预览详细

本文介绍了如何使用掌控板获取光照值并通过物联网OneNet平台发送数据，在微信小程序中实时显示。项目涉及硬件包括掌控板和微信小程序，最终效果是实现实时显示光照值。难度适中，适合有一定基础的用户。

实现，掌控板获取光照值，发送至物联网OneNet,微信小程序读取并实时显示。与OneNet物联+App Inventor2（7）可结合实现双向通信。

演示视频（因用手机录像，微信小程序未在手机上运行，只在开发平台上运行）

小程序已提交审核1.05版，7天以内审核通过。“云天创客”，可通过微信搜索小程序云天创客”，现在还是（7）的内容，等待审核。
OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图7

微信小程序用到两个API，相关说明文档在下面。
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图2

OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图2

https://developers.weixin.qq.com/miniprogram/dev/api/base/timer/setTimeout.html

OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图3

微信小程序代码
1、
<view class="container">
  <view class="userinfo">

   <text class="user-motto">光照值：{{redata}}</text>

  </view>
  <view class="usermotto">

   <button  bindtap="timeout"> 获取数据 </button>
  </view>
</view>
OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图1

OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图1

2、//index.js文件代码
//获取应用实例
const app = getApp()

Page({
data: {

  redata: 0,

},
//事件处理函数

timeout: function() {
  var that = this;
  var timerName = setTimeout(function() {

wx.request({
   url: 'https://api.heclouds.com/devices/5665449291/datastreams/yuntian', //仅为示例，并非真实的接口地址（填写自己的）
   data: {
      x: '',
      y: ''
   },
   header: {
      'api-key': 'Zlv41HNzpK9=Gdd7kEIbAqPmpUk=' // 填写自己的
   },
   method: 'get',
   dataType: 'json',
   success(res) {
      console.log(res.data.data);

      that.setData({
      redata: res.data.data.current_value
      })
   }
});
that.timeout()
  }, 10000)
}
})
3、掌控板 Mpython x程序（源代码在附件中）
OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图4

OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图4

OneNet物联+App Inventor2(8)——掌控板+微信小程序显示数据图5

my_code.zip