基于Hbuilder X的uni-app连接OneNET云平台及AI交互 实战指南（三）——命令下发

发布于：2025-03-29 ⋅ 阅读:(27) ⋅ 点赞:(0)

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

文章目录

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

前言

本系列将以0基础新手视角，完整演示从账号注册到云端数据可视化的全流程，涵盖token生成、获取云平台数据，MQTT命令下发及代码实现。
🔗 ​配套学习：建议结合《基于ArduinoESP32-S3连接OneNET云平台指南》理解硬件端对接逻辑
注：此版本基于OneNET云平台的数据流模型，与物模型不同。但也会附上相关代码。

（三）本文为基于Hbuilder X的uni-app连接OneNET云平台，命令下发

一、搭建项目

1. 复制粘贴

复制粘贴“P2从云平台获取数据”，重新命名为 P3APP下发命令控制TLED
在这里插入图片描述在这里插入图片描述

2. 导入

1.右键工作区→导入→从本地目录导入
在这里插入图片描述在这里插入图片描述

2.打开对应的index.vue，关闭“P2的vue”
在这里插入图片描述

3.运行到“内置浏览器”，页面效果应和P2一样。
在这里插入图片描述

二、核心代码解析

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 = 'your product_id';
	const device_name = 'your device_name';

		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);
						}
					});
				},
 onTLEDSwitch(event) {
    const value = event.detail.value ? 1 : 0;
    console.log('下发命令值:', value);
    uni.request({
      url: `https://iot-api.heclouds.com/datapoint/synccmds?product_id=${product_id}&device_name=${device_name}&timeout=5`,
      method: 'POST',
      data: {
        "TLED": {
          "v": value  
        }
      },
      header: {
        'authorization': this.token,
        'Content-Type': 'application/json'
      },
      success: (res) => {
        console.log('完整响应:', res.data);
        if (res.data.code === 0) {
          uni.showToast({ title: '操作成功' });
          // 添加设备响应解码
          const decodedResp = atob(res.data.data?.cmd_resp || '');
          console.log('设备原始响应:', decodedResp); 
          setTimeout(() => this.fetchDevData(), 2000);
        } 
      }
    });
  }
}
		}
</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 = 'your product_id';
	const device_name = 'your device_name';
      author_key: 'your author_key', // 身份标识
      version: '2022-05-01',         // 鉴权协议版本
      user_id: 'your user_id'        // 开发者id

MQTT命令下发函数
参考OneNET云平台文档：MQTT命令下发

 onTLEDSwitch(event) {
    const value = event.detail.value ? 1 : 0;
    console.log('下发命令值:', value);
    uni.request({
      url: `https://iot-api.heclouds.com/datapoint/synccmds?product_id=${product_id}&device_name=${device_name}&timeout=5`,
      method: 'POST',
      data: {
        "TLED": {
          "v": value  
        }
      },
      header: {
        'authorization': this.token,
        'Content-Type': 'application/json'
      },
      success: (res) => {
        console.log('完整响应:', res.data);
        if (res.data.code === 0) {
          uni.showToast({ title: '操作成功' });
          // 添加设备响应解码
          const decodedResp = atob(res.data.data?.cmd_resp || '');
          console.log('设备原始响应:', decodedResp); 
          setTimeout(() => this.fetchDevData(), 2000);
        } 
      }
    });
  }

三、命令下发格式

1.参考云平台下发的格式
在这里插入图片描述

{
  "TLED": {
    "v": 1   // 1=开灯，0=关灯
  }
}

2.对应格式

data: {
        "TLED": {
          "v": value  
        }
      },

四、调试与验证

成功标志

注：要保证设备在线

  1. 将《二、核心代码解析》直接复制到index.vue中，修改对应的 user_id等
  2. 用快捷键 《ctrl + s》或者左上角文件，保存。 此时右边页面会自动更新。
  3. 成功标志： 测试灯开关，可以控制 实物灯 亮灭
    在这里插入图片描述

总结

本文搭建了基于Hbuilder X的uni-app连接OneNET云平台，命令下发，下篇文章将讲解接入DeepSeek大模型，AI交互。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布