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/m3</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/m3</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/m3"。
综合起来，这段代码可能是用于展示一个名为 "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/m3</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>
解析：
1.
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 + "
" + method + "
" + res + "
" + 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 + "
" + method + "
" + res + "
" + version`，其中 `
` 表示换行符。
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` 函数本身，从而允许该函数在其他模块中被使用。
2.
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'`。
这些属性可以在组件的模板中直接引用和操作，例如通过双花括号 `{{}}` 语法显示属性的值或通过指令绑定在组件中修改属性的值。
3.
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的值。
4.
onShow() {
this.fetchDevData();
setInterval(()=>{
this.fetchDevData();
},3000)
},
在页面展示时会执行 `onShow()` 函数。
函数内部首先调用 `this.fetchDevData()` 方法，用于获取设备数据。
然后，通过调用 `setInterval()` 方法创建一个定时器，每隔 3000 毫秒（即 3 秒）调用一次 `this.fetchDevData()` 方法，用于定时更新设备数据。
总结起来，这段代码的作用是在页面展示时初始化设备数据，并通过定时器每 3 秒刷新一次设备数据。这样可以确保设备数据始终保持最新。
5.
methods: {
one(){
uni.switchTab({
url:'/pages/index/me',
})
},
在 `methods` 对象中定义了一个名为 `one` 的方法。该方法内部使用 `uni.switchTab()` 方法，用于跳转到指定的 Tab 页。在这个例子中，通过设置 `url` 参数为 `'/pages/index/me'`，表示跳转到名为 `me` 的 Tab 页。总结起来，这段代码的作用是定义了一个方法 `one`，当调用该方法时，会切换到名为 `me` 的 Tab 页。这个没看明白的同学可以去看
uniapp学习笔记---tabbar
6.
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 请求，从服务器获取设备数据，并将返回的数据中的特定属性值保存在相应的变量中，以供后续使用。
7.
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>