基于Hbuilder X的uni-app连接OneNET云平台及AI交互 实战指南（二）——获取数据流模型的数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、搭建项目
• • 1. 复制粘贴
  • 2. 导入
• 二、核心代码解析
• • 1.代码如下（示例）：
  • 2.关键函数说明：
• 三、获取数据流格式
• 四、调试与验证
• • 成功标志
• 总结

---

前言

本系列将以0基础新手视角，完整演示从账号注册到云端数据可视化的全流程，涵盖token生成、获取云平台数据，MQTT命令下发及代码实现。

🔗 ​配套学习：建议结合《基于ArduinoESP32-S3连接OneNET云平台指南》理解硬件端对接逻辑

注：此版本基于OneNET云平台的数据流模型，与物模型不同。但也会附上相关代码。

（二）本文为基于Hbuilder X的uni-app连接OneNET云平台，获取数据流模型的数据

一、搭建项目

1. 复制粘贴

复制粘贴"P1文件夹"，重新命名为 P2从云平台获取数据

2. 导入

1.右键工作区→导入→从本地目录导入

2.打开对应的index.vue，关闭"P1的vue"

3.运行到"内置浏览器"，页面效果应和P1一样。

二、核心代码解析

1.代码如下（示例）：

注：修改1. author_key ； 2. user_id； 3. product_id ; 4. device_name ;

<template>

	<view class="wrap">
		<view class="dev-vessel"></view>
		<view class="dev-card">
			<view class="">
				<view class="dev-name">温度 </view>
				<image class="dev-logo" src="../../static/logo.png" mode=""></image>
			</view>
			<view class="dev-data">{{temp}}℃</view>
		</view>


		<view class="dev-card">
			<view class="">
				<view class="">湿度 </view>
				<image class="dev-logo" src="../../static/logo.png" mode=""></image>
			</view>
			<view class="dev-data">{{humi}}℃</view>
		</view>



		<view class="">测试灯 </view>
		<switch :checked="TLED" @change="onTLEDSwitch" />
	</view>
</template>

<script>
	const {
		createCommonToken
	} = require('@/key.js');
	const product_id = '6E493J2jZj';
	const device_name = 'ESP32-S33-DevKitC-1';
	export default {
		data() {
			return {
				temp: '--',
				humi: '--',
				TLED: false,
				token: ''
			};
		},
		onLoad() {
			this.initToken();
			this.fetchDevData();
		},
		methods: {
			initToken() {
				const params = {
      author_key: 'your author_key', // 身份标识
      version: '2022-05-01',         // 鉴权协议版本
      user_id: 'your user_id'        // 开发者id
				};
				this.token = createCommonToken(params);
			},

			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/datapoint/history-datapoints',
					method: 'GET',
					data: {
						product_id: product_id,
						device_name: device_name
					},
					header: {
						authorization: this.token
					},
					success: (res) => {
						console.log('数据获取成功:', res.data);
						if (res.data.data?.datastreams) {
							this.humi = res.data.data.datastreams[2]?.datapoints[0]?.value || '--';
							this.temp = res.data.data.datastreams[1]?.datapoints[0]?.value || '--';
							this.TLED = res.data.data.datastreams[0]?.datapoints[0]?.value === 1;
						}
					},
					fail: (err) => {
						console.error('获取数据失败:', err);
					}
				});
			},

		}
	};
</script>


<style>
	//内边距
	.wrap {
		padding: 30rpx;
	}

	//卡片外容器的排列方式
	.dev-vessel {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	//卡片的状态,高,宽,圆角,？,卡片上边距,内部内容的空间位置,内部内容的空间位置,阴影
	.dev-card {
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		display: flex;
		margin-top: 30rpx;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	//数值的文本状态
	.dev-data {
		font-size: 20rpx;
		text-align: center;
		color: #6d6d6d;
	}

	//图片与字体的边距
	.dev-logo {
		height: 70rpx;
		width: 70rpx;
		margin-top: 10rpx;
	}

	//字体的大小，位置和颜色
	.dev-name {
		font-size: 20rpx;
		text-align: center;
		color: #6d6d6d;
	}
</style>

2.关键函数说明：

修改位置

	const product_id = '6E493J2jZj';
	const device_name = 'ESP32-S33-DevKitC-1';
      author_key: 'your author_key', // 身份标识
      version: '2022-05-01',         // 鉴权协议版本
      user_id: 'your user_id'        // 开发者id

获取数据流模型

参考OneNET云平台文档：查询设备数据点

fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/datapoint/history-datapoints',
					method: 'GET',
					data: {
						product_id: product_id,
						device_name: device_name
					},
					header: {
						authorization: this.token
					},
					success: (res) => {
						console.log('数据获取成功:', res.data);
						if (res.data.data?.datastreams) {
							this.humi = res.data.data.datastreams[2]?.datapoints[0]?.value || '--';
							this.temp = res.data.data.datastreams[1]?.datapoints[0]?.value || '--';
							this.TLED = res.data.data.datastreams[0]?.datapoints[0]?.value === 1;
						}
					},
					fail: (err) => {
						console.error('获取数据失败:', err);
					}
				});
			}

三、获取数据流格式

1.参考控制台输出的 res.data

					success: (res) => {
						console.log('数据获取成功:', res.data);
						if (res.data.data?.datastreams) {
							this.humi = res.data.data.datastreams[2]?.datapoints[0]?.value || '--';
							this.temp = res.data.data.datastreams[1]?.datapoints[0]?.value || '--';
							this.TLED = res.data.data.datastreams[0]?.datapoints[0]?.value === 1; //获取0或1，转成布尔型
						}

2.点击"显示开发者工具"→点击"方框"→点击"方框"→拖拽出来→点击"Console"→下拉出来

3.点开"三角形"，再一系列嵌套格式中，可以看到id："TLED"，Value：1

4.对应格式

this.TLED = res.data.data.datastreams[0]?.datapoints[0]?.value === 1;  //TLED多一步转化为布尔值

四、调试与验证

成功标志

1. 将《二、核心代码解析》直接复制到index.vue中，修改对应的 user_id等
2. 用快捷键 《ctrl + s》或者左上角文件，保存。 此时右边页面会自动更新。
3. 成功标志： 温湿度显示 对应数值
4. 

总结

本文搭建了基于Hbuilder X的uni-app连接OneNET云平台，获取数据流模型的数据，下篇文章将讲解对应的云平台命令下发。