用树莓派获取传感器数据通过Onenet云平台(物模型)传输至微信小程序(下)

用树莓派获取传感器数据通过Onenet云平台(物模型)传输至微信小程序(上)-CSDN博客

在上一篇的基础上,我们已经能够通过树莓派获取传感器的数据,传送至Onenet云平台。

接下来,我们将数据从Onenet云平台传输到微信小程序。

一、生成token

登陆后,点击右上角的头像,再点击访问权限

获取自己的“用户ID”和“用户AccessKey"

token v2.0链接

链接:https://pan.baidu.com/s/10UqLSNt0vX1Cpi5hBn-K9A 
提取码:bdft

下载完成后将“用户ID”和“用户AccessKey"填在对应的位置

时间戳(Unix timestamp)转换工具 - 在线工具 (tool.lu)

res:userid/用户ID

et:未来时间(用上面的时间戳生成链接生成)

key:用户AccessKey

method:sha1

version:2022-05-01

(method和version和我一样,不要更改!)

填入自己的信息后点击Generate,下方就会生成token。

二、在微信小程序调用OneNET的API(GET请求)

(这部分教程我参考了这篇博客)物联网实践教程(终章):微信小程序结合OneNET平台MQTT实现51/STM32单片机智能控制与温度等数据实时显示【微信小程序篇】_4.物联网实践教程(终章):微信小程序结合onenet平台mqtt实现51/stm32单片机智-CSDN博客

将之前生成的token填入,换成自己的产品ID和设备ID(只需要更改我框起来的三个部分)

fetchOnenetData()函数详细解读:

该函数功能是使用 OneNET 平台的 API 获取 MQTT 设备(接入协议为MQTT就行)的最新属性值。

  1. authInfo 是用于鉴权的信息,其中包含了API 版本、用户标识、过期时间、请求方法和签名等信息。这里需要将其替换为你实际的鉴权信息。

  2. 使用 wx.request() 方法向指定的 OneNET API 地址发送 GET 请求,请求参数包括产品 ID 和设备名称。

  3. 在成功获取响应后,会执行 success 回调函数,将返回的数据存储在页面数据对象的 onenetData 中,以便后续处理和展示。

  4. 如果请求失败,则会执行 fail 回调函数,输出错误信息到控制台供调试和处理。

总的来说,fetchOnenetData()函数实现了从 OneNET 平台获取 MQTT 设备最新属性值的功能,并在小程序中进行相应的处理。

代码如下

 // 获取设备最新属性值
  fetchOnenetData() {
        // 这里替换为用户的实际鉴权信息
        const authInfo = "version=2022-05-01&res=userid%2F345494&et=1712483535&method=sha1&sign=rKq9rzySLpd%2B4hXD%2BS%2Fu3KHryG4%3D"; 
        wx.request({
          url: 'https://iot-api.heclouds.com/thingmodel/query-device-property?product_id=774mY758yi&device_name=test',
          method: "GET",
          header: {
            'Authorization': authInfo
          },
          success: (res) => {
            // 更新设备属性值数据
            this.setData({
              onenetData: res.data
            });
          },
          fail: (err) => {
            console.log("OneNET数据请求失败");
            console.error(err); // 处理请求失败的情况
          }
        });
      },

然后通过以下代码调用onenetData.data中存储的平台数据(数组顺序是按照Onenet平台上属性的顺序)

代码如下

  <!-- 设备属性值展示,根据属性类型使用不同的单位 -->
  <view class="data-values">
    <!-- 显示可调电阻,单位为百分比(%) -->
    <text style="font-size: 50rpx; margin-bottom: 140rpx;">{{onenetData.data[0].value}} %RH</text>
    <!-- 显示温度值,颜色根据计算结果变化,单位为摄氏度(℃) -->
    <text style="font-size: 50rpx; color: {{temperatureColor}};">{{onenetData.data[1].value}} ℃</text>
  </view>

三、微信小程序查看传输数据

这样微信小程序就可以实时查看传感器获取的数据啦!

 


以上,便是用树莓派获取传感器数据通过Onenet云平台传输至微信小程序教程的全部内容,希望大家都能够实现功能!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值