基于STM32的物联网环境监测与远程控制系统实训套件-淘宝网任务2 从OneNet平台获取数据一、任务描述本任务基于微信小程序结合任务 1 生成的鉴权 Token调用 OneNET 物联网平台 标准 HTTP 接口实现小程序向云端请求设备上报的温度、湿度、光照传感器数据。完成网络请求配置、鉴权头携带、JSON 数据解析、前端页面渲染、定时刷新等功能掌握小程序与 OneNET 平台的数据交互流程排查接口鉴权类常见错误。二、任务目标1. 知识目标1掌握 OneNET 平台设备属性查询接口的请求地址、请求方式、请求参数。2理解 OneNET HTTP 接口鉴权规则明确 Authorization 请求头的作用与格式。3熟练使用微信小程序 wx.request 发起网络请求区分 GET 请求配置规范。4掌握接口返回 JSON 数据的解析方法能够提取传感器有效数据。5理解鉴权失败报错含义掌握 authorization 为空 问题排查思路。2. 能力目标1能够正确填写 OneNET 接口地址、设备 ID、产品 ID 等核心参数。2能够将任务 1 生成的 Token 放入请求头完成接口身份鉴权。3能够成功调用接口获取云端温湿度、光照原始数据。4能够解析返回数据并渲染到小程序页面实现数据可视化展示。5能够结合定时器实现传感器数据定时自动刷新。3. 素质目标1养成 先生成 Token → 再调用接口 的标准物联网开发流程。2提升网络调试、接口报错分析、前后端联调排错能力。3建立「小程序客户端 - OneNET 云端 - 终端硬件」三层物联网架构思维。三、任务重难点1. 任务重点1请求头 Authorization 正确绑定 OneNET 鉴权 Token保证鉴权生效。2准确配置 OneNET 接口地址、设备 ID、数据流名称等请求参数。3解析平台返回 JSON 格式数据提取温度、湿度、光照数值。4将解析后的数据动态渲染至页面配合定时器实现实时刷新。2. 任务难点1区分 OneNET 新旧版接口、鉴权格式避免字段拼写、大小写错误。2保证 Token 生成时序防止 Token 未完成就发起网络请求。3排查 authorization cannot be empty 鉴权失败问题。4根据 OneNET 返回数据结构精准匹配对应传感器字段。四、知识准备1.OneNET核心接口说明本次使用 OneNET HTTP 查询设备数据流接口用于读取设备上报的传感器数据接口基础地址https://iot-api.heclouds.com/thingmodel/query-device-property请求方式GET接口作用查询设备下所有数据流温度、湿度、光照等传感器数据必备请求参数product_id设备所属产品 ID平台后台可查看device_name设备名称平台后台自定义命名鉴权强制要求HTTP 请求头必须携带 Authorization 字段值为任务 1 生成的鉴权 Token无 Token、Token 为空会直接鉴权失败。2.OneNET 鉴权规则补充1Token 基于 version、res、et、api-key 等参数通过 HMAC-SHA1 Base64 加密生成由任务 1 的 key.js 统一封装。2所有 OneNET HTTP 接口必须携带 Authorization 请求头这是平台统一身份校验标准。3Token 具备时效性建议每次页面加载重新生成。3.微信小程序网络请求规则1小程序正式环境需要配置平台合法域名本地调试必须勾选「不校验合法域名、TLS 证书」。2wx.request 中 header 用于传递鉴权信息data 用于拼接 URL 请求参数。3success 回调接收平台 JSON 返回数据fail 捕获网络中断、域名错误等异常。4.前置环境依赖1已完成 任务 1Node.js 环境、PowerShell 策略配置、crypto-js 库安装、key.js 工具文件正常使用。2小程序基础库固定为 2.29.2规避模拟器超时、运行异常问题。3提前在 OneNET 平台后台记录设备ID、数据流名称(temp/humi/light)、API-Key。5.JSON 返回数据格式说明OneNET 标准数据流返回示例{errno: 0,data: [{id: temp,current_value: 25.6,update_at: 2026-06-13 08:20:00},{id: humi,current_value: 48.2,},{id: light,current_value: 360}]}errno:0 代表接口请求成功data 为数据流数组id 是数据流名称current_value 为传感器实时数值。五、任务实现任务2.1编写网络请求与数据解析逻辑index.js// pages/index/index.jsconst { createCommonToken } require(../../key.js);Page({data: {// 传感器数据temp: ,humi: ,light: ,// 设备状态ledStatus: false,fanStatus: false,// 时间nowDate: ,nowTime: ,// 鉴权与定时器token: ,timeInterval: null},onLoad() {// 1. 生成IoT鉴权Tokenconst params {author_key: hkjx0fumJ77GvWa2VU8SNM28uii7KRuszCzGMBVK1/MdprEje4csrjcRNMMN1D,version: 2022-05-01,user_id: 460603,};this.setData({token: createCommonToken(params)});// 初始化时间this.updateTime();},onShow() {// 立即查询一次设备数据this.fetchDevData();// 开启定时器3秒轮询刷新数据const timer setInterval(() {this.fetchDevData();this.updateTime();}, 3000);this.setData({ timer });},onHide() {// 页面隐藏 清除定时器if (this.data.timer) {clearInterval(this.data.timer);this.setData({ timer: null });}},onUnload() {// 页面卸载 清除定时器if (this.data.timer) {clearInterval(this.data.timer);this.setData({ timer: null });}},// 时间格式化日期星期 时分秒 updateTime() {const d new Date();const weekArr [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六];let y d.getFullYear();let m d.getMonth() 1;let day d.getDate();let h d.getHours();let mi d.getMinutes();let s d.getSeconds();m m 10 ? 0 m : m;day day 10 ? 0 day : day;h h 10 ? 0 h : h;mi mi 10 ? 0 mi : mi;s s 10 ? 0 s : s;this.setData({nowDate: ${y}年${m}月${day}日 ${weekArr[d.getDay()]},nowTime: ${h}:${mi}:${s}});},// 查询传感器设备状态 fetchDevData() {const that this;wx.request({url: https://iot-api.heclouds.com/thingmodel/query-device-property,method: GET,data: {product_id: tsK7G227aH,device_name: a1},header: {authorization: that.data.token},success: function (res) {console.log(设备数据, res.data);const dataList res.data.data;// 按物模型顺序解析温度、湿度、光照、LED、风扇that.setData({temp: dataList[4].value,humi: dataList[2].value,light: dataList[3].value,ledStatus: dataList[0].value true,fanStatus: dataList[1].value true});},fail: function (err) {console.error(查询数据失败, err);}});},ledOn() {wx.showToast({ title: LED已开启, icon: success })},ledOff() {wx.showToast({ title: LED已关闭, icon: success })},fanOn() {wx.showToast({ title: 风扇已开启, icon: success })},fanOff() {wx.showToast({ title: 风扇已关闭, icon: success })}})任务 2.2 运行与结果验证1.打开硬件设备电源确认目标设备在线。2.点击开发者工具“编译”按钮运行小程序。3.打开调试器切换至Console控制台。4.查看接口返回日志若 code:0请求成功控制台打印完整设备数据页面自动刷新温度、湿度、光照数值如图1所示若出现 code:10403代表 authorization 为空回头检查 Token 生成逻辑、请求头字段名。图1控制台打印完整设备数据5.观察页面传感器卡片实时展示云端下发的温湿度、光照数据数据每3秒自动刷新。
模块4 微信小程序开发用户界面-项目2 界面功能实现-任务2 从OneNet平台获取数据
基于STM32的物联网环境监测与远程控制系统实训套件-淘宝网任务2 从OneNet平台获取数据一、任务描述本任务基于微信小程序结合任务 1 生成的鉴权 Token调用 OneNET 物联网平台 标准 HTTP 接口实现小程序向云端请求设备上报的温度、湿度、光照传感器数据。完成网络请求配置、鉴权头携带、JSON 数据解析、前端页面渲染、定时刷新等功能掌握小程序与 OneNET 平台的数据交互流程排查接口鉴权类常见错误。二、任务目标1. 知识目标1掌握 OneNET 平台设备属性查询接口的请求地址、请求方式、请求参数。2理解 OneNET HTTP 接口鉴权规则明确 Authorization 请求头的作用与格式。3熟练使用微信小程序 wx.request 发起网络请求区分 GET 请求配置规范。4掌握接口返回 JSON 数据的解析方法能够提取传感器有效数据。5理解鉴权失败报错含义掌握 authorization 为空 问题排查思路。2. 能力目标1能够正确填写 OneNET 接口地址、设备 ID、产品 ID 等核心参数。2能够将任务 1 生成的 Token 放入请求头完成接口身份鉴权。3能够成功调用接口获取云端温湿度、光照原始数据。4能够解析返回数据并渲染到小程序页面实现数据可视化展示。5能够结合定时器实现传感器数据定时自动刷新。3. 素质目标1养成 先生成 Token → 再调用接口 的标准物联网开发流程。2提升网络调试、接口报错分析、前后端联调排错能力。3建立「小程序客户端 - OneNET 云端 - 终端硬件」三层物联网架构思维。三、任务重难点1. 任务重点1请求头 Authorization 正确绑定 OneNET 鉴权 Token保证鉴权生效。2准确配置 OneNET 接口地址、设备 ID、数据流名称等请求参数。3解析平台返回 JSON 格式数据提取温度、湿度、光照数值。4将解析后的数据动态渲染至页面配合定时器实现实时刷新。2. 任务难点1区分 OneNET 新旧版接口、鉴权格式避免字段拼写、大小写错误。2保证 Token 生成时序防止 Token 未完成就发起网络请求。3排查 authorization cannot be empty 鉴权失败问题。4根据 OneNET 返回数据结构精准匹配对应传感器字段。四、知识准备1.OneNET核心接口说明本次使用 OneNET HTTP 查询设备数据流接口用于读取设备上报的传感器数据接口基础地址https://iot-api.heclouds.com/thingmodel/query-device-property请求方式GET接口作用查询设备下所有数据流温度、湿度、光照等传感器数据必备请求参数product_id设备所属产品 ID平台后台可查看device_name设备名称平台后台自定义命名鉴权强制要求HTTP 请求头必须携带 Authorization 字段值为任务 1 生成的鉴权 Token无 Token、Token 为空会直接鉴权失败。2.OneNET 鉴权规则补充1Token 基于 version、res、et、api-key 等参数通过 HMAC-SHA1 Base64 加密生成由任务 1 的 key.js 统一封装。2所有 OneNET HTTP 接口必须携带 Authorization 请求头这是平台统一身份校验标准。3Token 具备时效性建议每次页面加载重新生成。3.微信小程序网络请求规则1小程序正式环境需要配置平台合法域名本地调试必须勾选「不校验合法域名、TLS 证书」。2wx.request 中 header 用于传递鉴权信息data 用于拼接 URL 请求参数。3success 回调接收平台 JSON 返回数据fail 捕获网络中断、域名错误等异常。4.前置环境依赖1已完成 任务 1Node.js 环境、PowerShell 策略配置、crypto-js 库安装、key.js 工具文件正常使用。2小程序基础库固定为 2.29.2规避模拟器超时、运行异常问题。3提前在 OneNET 平台后台记录设备ID、数据流名称(temp/humi/light)、API-Key。5.JSON 返回数据格式说明OneNET 标准数据流返回示例{errno: 0,data: [{id: temp,current_value: 25.6,update_at: 2026-06-13 08:20:00},{id: humi,current_value: 48.2,},{id: light,current_value: 360}]}errno:0 代表接口请求成功data 为数据流数组id 是数据流名称current_value 为传感器实时数值。五、任务实现任务2.1编写网络请求与数据解析逻辑index.js// pages/index/index.jsconst { createCommonToken } require(../../key.js);Page({data: {// 传感器数据temp: ,humi: ,light: ,// 设备状态ledStatus: false,fanStatus: false,// 时间nowDate: ,nowTime: ,// 鉴权与定时器token: ,timeInterval: null},onLoad() {// 1. 生成IoT鉴权Tokenconst params {author_key: hkjx0fumJ77GvWa2VU8SNM28uii7KRuszCzGMBVK1/MdprEje4csrjcRNMMN1D,version: 2022-05-01,user_id: 460603,};this.setData({token: createCommonToken(params)});// 初始化时间this.updateTime();},onShow() {// 立即查询一次设备数据this.fetchDevData();// 开启定时器3秒轮询刷新数据const timer setInterval(() {this.fetchDevData();this.updateTime();}, 3000);this.setData({ timer });},onHide() {// 页面隐藏 清除定时器if (this.data.timer) {clearInterval(this.data.timer);this.setData({ timer: null });}},onUnload() {// 页面卸载 清除定时器if (this.data.timer) {clearInterval(this.data.timer);this.setData({ timer: null });}},// 时间格式化日期星期 时分秒 updateTime() {const d new Date();const weekArr [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六];let y d.getFullYear();let m d.getMonth() 1;let day d.getDate();let h d.getHours();let mi d.getMinutes();let s d.getSeconds();m m 10 ? 0 m : m;day day 10 ? 0 day : day;h h 10 ? 0 h : h;mi mi 10 ? 0 mi : mi;s s 10 ? 0 s : s;this.setData({nowDate: ${y}年${m}月${day}日 ${weekArr[d.getDay()]},nowTime: ${h}:${mi}:${s}});},// 查询传感器设备状态 fetchDevData() {const that this;wx.request({url: https://iot-api.heclouds.com/thingmodel/query-device-property,method: GET,data: {product_id: tsK7G227aH,device_name: a1},header: {authorization: that.data.token},success: function (res) {console.log(设备数据, res.data);const dataList res.data.data;// 按物模型顺序解析温度、湿度、光照、LED、风扇that.setData({temp: dataList[4].value,humi: dataList[2].value,light: dataList[3].value,ledStatus: dataList[0].value true,fanStatus: dataList[1].value true});},fail: function (err) {console.error(查询数据失败, err);}});},ledOn() {wx.showToast({ title: LED已开启, icon: success })},ledOff() {wx.showToast({ title: LED已关闭, icon: success })},fanOn() {wx.showToast({ title: 风扇已开启, icon: success })},fanOff() {wx.showToast({ title: 风扇已关闭, icon: success })}})任务 2.2 运行与结果验证1.打开硬件设备电源确认目标设备在线。2.点击开发者工具“编译”按钮运行小程序。3.打开调试器切换至Console控制台。4.查看接口返回日志若 code:0请求成功控制台打印完整设备数据页面自动刷新温度、湿度、光照数值如图1所示若出现 code:10403代表 authorization 为空回头检查 Token 生成逻辑、请求头字段名。图1控制台打印完整设备数据5.观察页面传感器卡片实时展示云端下发的温湿度、光照数据数据每3秒自动刷新。