模块4 微信小程序开发用户界面-项目2 界面功能实现-任务3 微信小程序下发命令控制设备

基于STM32的物联网环境监测与远程控制系统实训套件-淘宝网任务3 微信小程序下发命令控制设备一、任务描述本任务基于OneNET 物联网平台在任务 1生成鉴权 Token、任务 2获取传感器数据的基础上实现微信小程序向云端下发控制指令远程控制终端设备的 LED 灯、风扇启停。结合小程序按钮点击事件、wx.request网络请求、OneNET 设备命令下发接口完成指令封装、鉴权请求、状态联动等功能掌握小程序下发控制指令、云端转发指令、终端设备执行动作的完整物联网控制流程。二、任务目标1. 知识目标1掌握 OneNET 平台设备命令下发接口的地址、请求方式、请求参数规范。2理解设备控制指令的封装格式了解云端指令转发、硬件执行的原理。3巩固小程序wx.request POST 请求用法熟练配置鉴权请求头。4掌握按钮点击事件绑定、交互提示、设备状态联动刷新的实现逻辑。5加深理解「小程序 - OneNET 云端 - 终端硬件」三层架构的指令交互流程。2. 能力目标1能够正确调用 OneNET 命令下发接口配置接口地址、请求头、请求体参数。2能够根据硬件协议封装 LED、风扇的启停控制指令。3能够实现按钮点击触发指令下发并通过wx.showToast给出交互反馈。4能够结合数据查询接口自动刷新设备最新状态保证页面状态与硬件同步。5能够排查指令下发失败、鉴权错误、指令格式错误等常见问题。3. 素质目标1养成「先鉴权、再发指令、最后刷新状态」的标准设备控制开发流程。2提升指令调试、跨平台交互排错、软硬件联调的综合能力。3树立指令标准化、状态同步化的物联网工程开发思维。三、任务重难点1. 任务重点1正确使用 POST 方式调用 OneNET 设备命令下发接口配置Authorization鉴权头。2按照平台与硬件协议规范封装 LED、风扇的启停指令内容。3绑定页面按钮点击事件实现点击按钮触发指令下发。4指令下发完成后主动查询设备状态实现页面显示与硬件状态同步。2. 任务难点1严格匹配硬件约定的指令格式指令错误会导致硬件无响应。2区分 OneNET 查询接口GET与控制接口POST的配置差异。3处理指令下发超时、云端转发失败、硬件离线等异常场景。4保证 Token 有效性避免因鉴权问题导致指令下发失败。四、知识准备1.OneNET设备命令下发接口说明接口基础地址https://iot-api.heclouds.com/thingmodel/set-device-property请求方式POST鉴权规则请求头携带 authorization值为 MD5 生成的 Token必传请求参数dataproduct_id产品 IDdevice_name设备名称params属性键值对控制指令控制参数约定见表1表1控制参数约定设备动作params 内容开启 LED{LED: true}关闭 LED{LED: false}开启风扇{fan: true}关闭风扇{fan: false}2.GET与POST请求区别1任务2 数据查询使用GET仅向平台获取数据参数拼接在 URL 中2本任务设备控制使用POST向平台提交控制指令指令内容放在请求体data中3两种请求均需携带Authorization鉴权头字段名、大小写保持一致。3.交互与状态同步逻辑1按钮点击 → 下发控制指令 → 弹出操作成功 / 失败提示2指令下发完成后主动调用数据查询接口刷新 LED、风扇状态3定时器定时轮询设备状态保证页面长期与硬件状态同步。4.前置依赖1已完成任务 1、任务 2key.js、crypto-js正常工作可稳定生成 Token2小程序基础库固定为2.29.2本地调试已勾选不校验合法域名、TLS 证书3OneNET 平台设备在线终端硬件正常接收并解析云端转发的指令。五、任务实现任务3.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);}});},// LED 控制 ledOn() {this.controlDevice(LED, true);},ledOff() {this.controlDevice(LED, false);},// 风扇控制 fanOn() {this.controlDevice(fan, true);},fanOff() {this.controlDevice(fan, false);},// 通用设备控制方法 controlDevice(key, value) {const that this;let params {};params[key] value;// 优先弹出提示不用等接口返回wx.showToast({title: value ? 开启成功 : 关闭成功,icon: success,duration: 1500});// 再执行网络请求wx.request({url: https://iot-api.heclouds.com/thingmodel/set-device-property,method: POST,data: {product_id: tsK7G227aH,device_name: a1,params: params},header: {authorization: that.data.token},success: function () {that.fetchDevData();},fail: function () {// 接口失败兜底提示wx.showToast({title: 操作失败,icon: none});}});}})任务 3.2 运行与结果验证1.打开硬件设备电源确认目标设备在线。2.点击开发者工具“编译”按钮运行小程序。3.点击开启 LED按钮弹出「LED 开启成功」提示硬件 LED 点亮页面 LED 状态同步更新。4.点击关闭 LED按钮弹出对应提示硬件 LED 熄灭页面状态同步。5.依次测试风扇开启、关闭功能观察硬件动作与页面状态变化如图1所示。。图1 运行与结果验证