iot-bedroom-environment-controller/微信小程序源码/iot-home/pages/user-info

User-Info 页面功能说明

概述

User-Info 页面是用于 MQTT 连接测试和消息收发的测试页面，主要用于调试和验证 MQTT 通信功能。

核心功能

1. MQTT 连接状态监控

• 实时显示 MQTT 连接状态
• 监听连接、断开、离线、错误等事件
• 自动更新连接状态 UI

2. 消息订阅

• 自动订阅测试主题（默认: topic/test）
• 支持手动刷新订阅（下拉刷新）

3. 消息接收

• 接收并显示 MQTT 消息
• 自动解析 JSON 消息
• 保存最近 10 条消息记录
• 显示消息时间戳

4. 消息发送

• 支持发送测试消息
• 消息格式：JSON 对象，包含 type、timestamp 和 message 字段

数据结构

页面数据

data: {
  statusBarHeight: 0,              // 状态栏高度
  mqttConnected: false,            // MQTT连接状态
  connectionStatus: "等待MQTT连接", // 连接状态文本
  receivedMessage: null,           // 最新接收到的消息
  messageList: [],                 // 消息列表（最多10条）
  subscriptionTopic: "topic/test"  // 订阅的主题
}

消息对象结构

{
  topic: "topic/test",                    // 消息主题
  content: "消息内容",                      // 消息内容
  timestamp: "14:30:25"                   // 接收时间
}

测试消息格式

{
  type: "test",
  timestamp: 1699999999999,
  message: "测试消息 1699999999999"
}

API 说明

initMQTT()

初始化 MQTT 连接

功能:

• 检查全局 MQTT 实例是否存在
• 获取当前连接状态
• 如果已连接，自动订阅测试主题

setupMQTTEvents()

设置 MQTT 事件监听

监听的事件:

• connect: MQTT 连接成功
• close: 连接关闭
• offline: 连接离线
• error: 发生错误
• message: 接收到消息

subscribeToTestTopic()

订阅测试主题

功能:

• 订阅 subscriptionTopic 指定的主题
• 订阅成功或失败都会输出日志

updateConnectionStatus(isConnected)

更新 MQTT 连接状态

参数:

• isConnected (boolean): 连接状态

功能:

• 更新全局连接状态
• 更新页面 UI 显示
• 输出日志

publishTestMessage()

发布测试消息

功能:

• 发送 JSON 格式的测试消息
• 消息包含 type、timestamp 和 message 字段
• 发送成功或失败都会输出日志

使用示例

发送测试消息

// 调用方法发送测试消息
this.publishTestMessage();

修改订阅主题

// 在页面data中修改subscriptionTopic
this.setData({
  subscriptionTopic: "your/custom/topic",
});

// 重新订阅
this.subscribeToTestTopic();

获取最新消息

// 从data中获取最新消息
const latestMessage = this.data.receivedMessage;
console.log("最新消息:", latestMessage);

获取消息列表

// 从data中获取消息列表
const messageList = this.data.messageList;
console.log("消息列表:", messageList);

注意事项

1. MQTT 实例依赖

   • 依赖全局 MQTT 实例 app.globalData.mqttClient
   • 使用前确保 MQTT 已正确初始化

2. 连接状态管理

   • 使用全局状态 app.globalData.mqttConnected
   • 不再使用 mqttClient.connected 属性
   • 通过事件监听更新状态

3. 消息列表限制

   • 只保存最近 10 条消息
   • 超过 10 条会自动删除旧消息

4. 消息解析

   • 自动尝试解析 JSON 消息
   • 如果是 JSON，提取 message 字段
   • 如果不是 JSON，直接使用原始内容

5. 错误处理

   • 所有 MQTT 操作都有错误处理
   • 错误信息会输出到控制台
   • 关键操作失败会显示 Toast 提示

页面生命周期

onLoad

• 获取系统信息（状态栏高度）
• 初始化 MQTT
• 设置 MQTT 事件监听

onShow

• 重新初始化 MQTT
• 更新连接状态

onUnload

• 自动移除 MQTT 事件监听器

测试场景

1. 测试 MQTT 连接

1. 打开页面
2. 查看连接状态
3. 确认显示"MQTT 已连接"

2. 测试消息发送

1. 确保 MQTT 已连接
2. 点击发送测试消息按钮
3. 查看控制台日志
4. 确认消息已发送

3. 测试消息接收

1. 确保 MQTT 已连接
2. 使用其他 MQTT 客户端发送消息到 topic/test
3. 查看页面是否显示接收到的消息
4. 检查消息列表是否更新

4. 测试断线重连

1. 断开 MQTT 连接
2. 观察页面状态变化
3. 重新连接 MQTT
4. 确认页面自动更新连接状态

更新日志

• 2024-01-XX: 添加消息列表功能
• 2024-01-XX: 优化连接状态管理
• 2024-01-XX: 添加下拉刷新功能
• 2024-01-XX: 改进消息解析逻辑