uniapp+vue2+onenet联网解析

最新推荐文章于 2025-03-26 08:33:54 发布

爱吃草的汪汪

最新推荐文章于 2025-03-26 08:33:54 发布

阅读量2.2k

点赞数 23

文章标签： uni-app java 前端

本文链接：https://blog.youkuaiyun.com/m0_74970329/article/details/135745376

版权

1.第一部分：

<template>

		<view class="dev-area">
				
			<!-- #温度 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">温度</view>
					<image class="dev-logo" src="../../static/temp.png" mode=""></image>
				</view>
				<view class="dev-data">{{temp}} ℃</view>
			</view>
			<!-- #湿度 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">湿度</view>
					<image class="dev-logo" src="../../static/humi.png" mode=""></image>
				</view>
				<view class="dev-data">{{humi}} %</view>
			</view>
			<!-- #噪音 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">噪音</view>
					<image class="dev-logo" src="../../static/300.png" mode=""></image>
				</view>
				<view class="dev-data">{{parseFloat(volume).toFixed(2)}} dB</view>
			</view>
			<!-- #MQ2.5 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">MQ2.5</view>
					<image class="dev-logo" src="../../static/200.png" mode=""></image>
				</view>
				<view class="dev-data">{{parseFloat(MQ_25).toFixed(2)}} μg/m³</view>
			</view>
			<!-- #MQ135 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">MQ135</view>
					<image class="dev-logo" src="../../static/200.png" mode=""></image>
				</view>
				<view class="dev-data">{{parseFloat(MQ_135).toFixed(2)}} μg/m³</view>
			</view>
			<!-- #台灯 -->
			
			<!-- #MQ135 -->
			
			<view class="dev-cart1">
				<view class="">
					<view class="dev-name">台灯</view>
					<image class="dev-logo" src="../../static/lamp.png" mode=""></image>
				</view>
				<switch :checked="led" @change="onLedSwitch" color="#F0F0F0"/>
			</view>
			<!--设置-->
	</view>

</template>

解析：

部分一：

代码中使用了 `<view>` 标签，它可能是前端框架中定义的组件或者元素。这些 `<view>` 标签通过设置 `class` 属性来添加样式类，实现样式的控制。在代码中可以看到有多个 `<view>` 标签嵌套的结构，用于组织和布局页面的内容。

其中：

- 第一个 `<view>` 标签中应用了 `class="dev-cart"` 样式类，是用于设置该区块的整体样式。
- 在第二个 `<view>` 标签中没有设置样式类，是一个容器元素。
- 在第三个 `<view>` 标签中应用了 `class="dev-name"` 样式类，这个标签用于显示设备的名称。
- `<image>` 标签用于显示图片，其中通过 `class="dev-logo"` 样式类设置样式，`src="../../static/temp.png"` 设置图片的路径。

最后的 `<view>` 标签中应用了 `class="dev-data"` 样式类，这个标签用于显示设备的数据，如温度数值。

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

部分二：

- 第一个 `<view>` 标签应用了 `class="dev-cart"` 样式类，是用于设置整个设备卡片的样式。
- 在第二个 `<view>` 标签中没有设置样式类，是一个容器元素。
- 在第三个 `<view>` 标签中应用了 `class="dev-name"` 样式类，用于显示设备的名称，这里显示的是 "MQ135"。
- `<image>` 标签用于显示图片，其中通过 `class="dev-logo"` 样式类设置样式，`src="../../static/200.png"` 设置了图片的路径。

最后的 `<view>` 标签应用了 `class="dev-data"` 样式类，用于显示设备的数据。在这里，通过 `{{parseFloat(MQ_135).toFixed(2)}}` 进行了数据的处理和展示。其中 `MQ_135` 是一个变量，`parseFloat()` 函数用于将其转换为浮点数，并且使用 `toFixed(2)` 方法保留两位小数。最后，数据的单位是 "μg/m³"。

综合起来，这段代码可能是用于展示一个名为 "MQ135" 的设备的名称、图片和相应的测量数据，并为它们设置了对应的样式。具体的效果和样式可能需要结合整个页面的 HTML 结构和 CSS 样式来看。

<view class="dev-cart">
				<view class="">
					<view class="dev-name">MQ135</view>
					<image class="dev-logo" src="../../static/200.png" mode=""></image>
				</view>
				<view class="dev-data">{{parseFloat(MQ_135).toFixed(2)}} μg/m³</view>
			</view>

部分三：

- 第一个 `<view>` 标签应用了 `class="dev-cart1"` 样式类，是用于设置整个设备卡片的样式。
- 在第二个 `<view>` 标签中没有设置样式类，是一个容器元素。
- 在第三个 `<view>` 标签中应用了 `class="dev-name"` 样式类，用于显示设备的名称，这里显示的是 "台灯"。
- `<image>` 标签用于显示图片，其中通过 `class="dev-logo"` 样式类设置样式，`src="../../static/lamp.png"` 设置了图片的路径。

最后的 `<switch>` 标签使用了 Vue.js 的指令（使用冒号 `:`）和事件（使用 `@`），具体解析如下：
- `:checked="led"` 通过 `checked` 属性绑定了 `led` 变量的值，作为开关的默认状态。
- `@change="onLedSwitch"` 定义了 `change` 事件的处理方法为 `onLedSwitch`。

通过后面我们知道onLedSwitch是函数名。

综合起来，这段代码可能是用于展示一个名为 "台灯" 的设备的名称、图片和一个可切换的开关。开关的状态通过 `led` 变量控制，并且当开关状态发生改变时会触发 `onLedSwitch` 方法进行处理。

<view class="dev-cart1">
				<view class="">
					<view class="dev-name">台灯</view>
					<image class="dev-logo" src="../../static/lamp.png" mode=""></image>
				</view>
				<switch :checked="led" @change="onLedSwitch" color="#F0F0F0"/>
			</view>

2.第二部分：

<script>
	const {
		createCommonToken
	} = require('@/key.js')
	//定义数据属性初始值
	export default {
		data() {
			return {
				temp: '',
				humi: '',
				led: true,
				token: '',
				volume:'0',
				MQ_25:'0',
				MQ_135:'0',
			}
		},
		onLoad() {
			const params = {
				author_key: 'obgbcQ3j/hVw0gbcPqcmteDVY7AFJqZtWLfkuIJ5TAowjv7a3N5E6/+2B00I6EYyJhf0k1qodGNLLSy512ZGfg==',
				version: '2022-05-01',
				user_id: '327163',
			}
			this.token = createCommonToken(params);
		},
		//将显示的数据显示出来,包括温度和湿度
		onShow() {
			this.fetchDevData();
			setInterval(()=>{
				this.fetchDevData();
			},3000)
		},
		methods: {
			one(){
				uni.switchTab({
					url:'/pages/index/me',
				})
			},
			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						product_id: 'iKF1Y2o58G',
						device_name: 'd1',
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					//成功返回res.data 的长串数据
					success: (res) => {
						console.log(res.data);
						this.temp = res.data.data[4].value;
						this.humi = res.data.data[0].value;
						this.led = res.data.data[1].value === 'true';
						this.volume=res.data.data[5].value;
						this.MQ_25=res.data.data[3].value;
						this.MQ_135=res.data.data[2].value;

					}
				});
			},
			//上传脚本
			onLedSwitch(event) {
				//--LED灯
				console.log(event.detail.value);
				let value1 = event.detail.value;
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', 
					method: 'POST',
					data: {
						product_id: 'iKF1Y2o58G',
						device_name: 'd1',
						//上传的数据报文
						params: {
							"led": value1, //LED灯的值
						}
					},
					//请求报文头
					header: {
						'authorization': this.token //自定义请求头信息
					},
					//上传成功得到的回复
					success: () => {
						console.log('LED ' + (value1 ? 'ON' : 'OFF') + ' !');
					},
					
				});
			},
			

		}
	}
</script>

解析：

const {
		createCommonToken
	} = require('@/key.js')

这段代码是在 JavaScript 中导入一个名为 `createCommonToken` 的函数。同时，它还导入了一个名为 `key.js` 的模块（或者相对路径的文件）。

根据代码中的 `require('@/key.js')`，`require()` 是用来在 Node.js 中导入模块的函数。`@` 符号可能是用来指示模块的根路径或者别名。

总结起来，这段代码是导入了一个名为 `createCommonToken` 的函数，并导入了一个 `key.js` 模块（或文件）作为其来源。

以下是key.js

const crypto = require('crypto')

function createCommonToken(params) {
    const access_key = Buffer.from( params.author_key, "base64")

    const version = params.version
    let res = 'userid' + '/' + params.user_id
    const et = Math.ceil((Date.now() + 365 * 24 * 3600 * 1000) / 1000)   
    const method = 'sha1'

    const key = et + "\n" + method + "\n" + res + "\n" + version
    
    let sign = crypto.createHmac('sha1', access_key).update(key).digest().toString('base64')

    res = encodeURIComponent(res)
    sign = encodeURIComponent(sign)
    const token = `version=${version}&res=${res}&et=${et}&method=${method}&sign=${sign}`

    return token
}

module.exports = {
  createCommonToken
};

这段代码是一个用于创建通用token（common token）的函数，使用了 Node.js 的 `crypto` 模块。首先，通过 `require('crypto')` 导入了 Node.js 的 `crypto` 模块，用于进行加密操作。然后，定义了一个名为 `createCommonToken` 的函数，它接受一个名为 `params` 的参数对象。该函数的作用是生成一个通用token，并最终返回该token。

函数内部逻辑如下：

1. 将 `params.author_key` 使用 base64 解码为 Buffer，并赋值给 `access_key` 变量。

2. 定义一个名为 `version` 的常量，其值为 `params.version`。`version` 在后续的拼接中会被使用到。

3. 拼接一个字符串 `res`，值为 `'userid' + '/' + params.user_id`。将其赋值给 `res` 变量。这个字符串的具体内容可能需要根据实际需求进行调整。

4. 计算一个名为 `et` 的值，通过获取当前时间戳加上一年的秒数，并使用 `Math.ceil()` 向上取整。这个值表示令牌的过期时间。

5. 定义一个名为 `method` 的常量，其值为 `'sha1'`，表示使用 SHA-1 算法进行加密。

6. 根据一定的格式，拼接一个名为 `key` 的字符串，其值为 `et + "\n" + method + "\n" + res + "\n" + version`，其中 `\n` 表示换行符。

7. 使用 `crypto.createHmac('sha1', access_key)` 创建一个 HMAC 对象，使用 `access_key` 作为密钥，并调用其 `update` 方法并传入 `key` 进行摘要计算。

8. 调用 `digest` 方法获取计算结果，并将其以 base64 格式进行编码，然后将其赋值给 `sign` 变量。

9. 使用 `encodeURIComponent` 方法分别对 `res` 和 `sign` 进行编码，将编码后的值重新赋给 `res` 和 `sign` 变量。

10. 最后，根据一定的格式，拼接一个名为 `token` 的字符串，其中包含了 `version`、`res`、`et`、`method` 和 `sign` 这些参数。

11. 将 `token` 返回，完成函数的执行。

最后，通过 `module.exports` 导出了一个对象，该对象包含了一个键值对，其中键为 `createCommonToken`，值为 `createCommonToken` 函数本身，从而允许该函数在其他模块中被使用。

data() {
			return {
				temp: '',
				humi: '',
				led: true,
				token: '',
				volume:'0',
				MQ_25:'0',
				MQ_135:'0',
			}
		}

这段代码是用于在 Vue.js 组件中定义 `data` 属性的一个方法。 `data` 属性用于存储组件的数据，并在页面渲染中进行绑定和使用。

根据代码，`data()` 方法返回了一个对象，其中包含了多个属性及其初始值：

- `temp` 属性的初始值为空字符串 `''`。
- `humi` 属性的初始值为空字符串 `''`。
- `led` 属性的初始值为布尔值 `true`。
- `token` 属性的初始值为空字符串 `''`。
- `volume` 属性的初始值为字符串 `'0'`。
- `MQ_25` 属性的初始值为字符串 `'0'`。
- `MQ_135` 属性的初始值为字符串 `'0'`。

这些属性可以在组件的模板中直接引用和操作，例如通过双花括号 `{{}}` 语法显示属性的值或通过指令绑定在组件中修改属性的值。

onLoad() {
			const params = {
				author_key: 'obgbcQ3j/hVw0gbcPqcmteDVY7AFJqZtWLfkuIJ5TAowjv7a3N5E6/+2B00I6EYyJhf0k1qodGNLLSy512ZGfg==',
				version: '2022-05-01',
				user_id: '327163',
			}
			this.token = createCommonToken(params);
		},

在加载页面时会执行 `onLoad()` 函数。函数内部定义了一个名为 `params` 的常量对象，包含了 `author_key`、`version` 和 `user_id` 这些属性。

然后，调用 `createCommonToken` 函数，并传入 `params` 对象作为参数，将返回的token赋值给 `this.token`。

总结起来，这段代码的作用是在页面加载时生成一个通用token，并将其赋值给 `this.token` 属性。您可以在后续的代码中使用 `this.token` 来表示·token的值。

onShow() {
			this.fetchDevData();
			setInterval(()=>{
				this.fetchDevData();
			},3000)
		},

在页面展示时会执行 `onShow()` 函数。

函数内部首先调用 `this.fetchDevData()` 方法，用于获取设备数据。

然后，通过调用 `setInterval()` 方法创建一个定时器，每隔 3000 毫秒（即 3 秒）调用一次 `this.fetchDevData()` 方法，用于定时更新设备数据。

总结起来，这段代码的作用是在页面展示时初始化设备数据，并通过定时器每 3 秒刷新一次设备数据。这样可以确保设备数据始终保持最新。

methods: {
			one(){
				uni.switchTab({
					url:'/pages/index/me',
				})
			},

在 `methods` 对象中定义了一个名为 `one` 的方法。该方法内部使用 `uni.switchTab()` 方法，用于跳转到指定的 Tab 页。在这个例子中，通过设置 `url` 参数为 `'/pages/index/me'`，表示跳转到名为 `me` 的 Tab 页。总结起来，这段代码的作用是定义了一个方法 `one`，当调用该方法时，会切换到名为 `me` 的 Tab 页。这个没看明白的同学可以去看

uniapp学习笔记---tabbar

fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						product_id: 'iKF1Y2o58G',
						device_name: 'd1',
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					//成功返回res.data 的长串数据
					success: (res) => {
						console.log(res.data);
						this.temp = res.data.data[4].value;
						this.humi = res.data.data[0].value;
						this.led = res.data.data[1].value === 'true';
						this.volume=res.data.data[5].value;
						this.MQ_25=res.data.data[3].value;
						this.MQ_135=res.data.data[2].value;

					}
				});
			},

`fetchDevData()` 方法用于从服务器获取设备数据。

在方法内部，使用 `uni.request()` 方法发起 HTTP 请求。请求的 URL 是 `https://iot-api.heclouds.com/thingmodel/query-device-property`，请求方法是 `GET`。同时，还提供了 `product_id` 和 `device_name` 作为请求参数。

请求头中包含了名为 `authorization` 的自定义请求头，其值为 `this.token`，即前面通过 `onLoad()` 方法生成的通用令牌。

当请求成功返回后，通过 `success` 回调函数处理返回的数据。在这个例子中，将返回的数据保存在 `res.data` 中，并通过该数据的结构来获取特定属性的值，将这些值保存在相应的变量中。

具体来说，将 `res.data.data[4].value` 的值保存在 `this.temp` 变量中，将 `res.data.data[0].value` 的值保存在 `this.humi` 变量中，将 `res.data.data[1].value` 是否等于 `'true'` 的结果保存在 `this.led` 变量中，将 `res.data.data[5].value` 的值保存在 `this.volume` 变量中，将 `res.data.data[3].value` 的值保存在 `this.MQ_25` 变量中，将 `res.data.data[2].value` 的值保存在 `this.MQ_135` 变量中。

总结起来，这段代码的作用是通过发送 HTTP 请求，从服务器获取设备数据，并将返回的数据中的特定属性值保存在相应的变量中，以供后续使用。

	onLedSwitch(event) {
				//--LED灯
				console.log(event.detail.value);
				let value1 = event.detail.value;
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', 
					method: 'POST',
					data: {
						product_id: 'iKF1Y2o58G',
						device_name: 'd1',
						//上传的数据报文
						params: {
							"led": value1, //LED灯的值
						}
					},
					//请求报文头
					header: {
						'authorization': this.token //自定义请求头信息
					},
					//上传成功得到的回复
					success: () => {
						console.log('LED ' + (value1 ? 'ON' : 'OFF') + ' !');
					},
					
				});
			},

`onLedSwitch(event)` 方法用于切换 LED 灯的状态。

在方法内部，首先使用 `console.log()` 打印出 `event.detail.value` 的值，即切换开关的新状态。

然后，将切换开关的新状态保存在名为 `value1` 的变量中。

接下来，使用 `uni.request()` 方法发起 HTTP 请求。请求的 URL 是 `https://iot-api.heclouds.com/thingmodel/set-device-property`，请求方法是 `POST`。同时，还提供了 `product_id` 和 `device_name` 作为请求参数。

请求体中包含了一个名为 `params` 的对象，其中 `led` 属性的值为 `value1`，即切换开关的新状态。

请求头中包含了名为 `authorization` 的自定义请求头，其值为 `this.token`，即前面通过 `onLoad()` 方法生成的通用令牌。

当请求成功返回后，通过 `success` 回调函数处理返回的数据。在这个例子中，打印出 `LED ON` 或 `LED OFF`，具体取决于切换开关的新状态。

总结起来，这段代码的作用是通过发送 HTTP 请求，将切换开关的新状态作为参数，控制 LED 灯的开关状态，同时在控制成功后进行相应的反馈。

3.第三部分：

仅供参考：

<style>
	.wrap {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;

	  background-image: url(../../static/2.jpg);
	  background-size: cover;
	  background-position: center;

	}


	.dev-area {
		
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dev-cart {
		background-color: white;
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	.dev-cart1 {
		background-color: white;
		height: 300rpx;
		width: 700rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #aab3ff;

	}
	
	.video-wrapper {
	  position: relative;
	  width: 100%;
	  height: 0;
	  margin-top: 30rpx;
	  padding-bottom: 56.25%; /* 16:9 宽高比视频占容器高度的百分比，可以根据需要调整 */
	}
	
	.video {
	  position: absolute;
	  top: 30;
	  left: 20;
	  width: 100%;
	  height: 100%;
	  object-fit: fill;
	}
	
	
	
	.dev-name {
		font-size: 20rpx;
		width: 5em; /* 适当调整宽度以容纳4个字 */
		text-align: center;
		color: #6d6d6d;

	}

	.dev-logo {
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
	}

	.dev-data {
		font-size: 50rpx;
		color: #6d6d6d;
	}
	
	.dev-data1 {
		font-size: 40rpx;
		color: #6d6d6d;
	}

	.number-input {
	    width: 50px;
	    height: 20px;
		border-radius: 0rpx;
	    border: 1px solid #ccc;
	    padding: 5px;
	    outline: none;
	}

	.input-container {
	  display: flex;
	  flex-direction: column;
	}
</style>