wx-chant/测试说明.md
邹方成 908502d5c1 feat(聊天): 添加自动发送欢迎消息功能并优化滚动逻辑
- 新增首次进入聊天页面自动发送"你好"消息功能
- 使用本地存储确保每个用户只发送一次欢迎消息
- 优化智能滚动逻辑,保持用户浏览位置
- 支持静默登录和已登录用户两种场景
2025-10-31 00:44:58 +08:00

4.6 KiB
Raw Blame History

聊天功能测试说明

功能更新内容

1. 自动滚动修复

已修复聊天页面自动刷新后自动滚动到底部的问题,现在实现智能滚动:

修复的问题

  • 轮询刷新时不再强制滚动到底部
  • 用户在底部时,新消息会自动滚动显示
  • 用户在上方浏览历史消息时,保持当前位置
  • 添加了延迟处理确保滚动生效

2. 自动发送欢迎消息 🆕

用户进入聊天页面时会自动发送"你好"消息给服务器:

新增功能

  • 用户首次进入聊天页面时自动发送"你好"消息
  • 使用本地存储确保每个用户只发送一次欢迎消息
  • 支持静默登录和已登录用户两种场景
  • 发送失败时不保存标记,下次可重试

修改的文件

  • pages/contact/index.js - 修改了滚动逻辑和添加了欢迎消息功能

测试步骤

1. 打开项目

  1. 使用微信开发者工具打开项目目录:/Users/win/code2025/wx-chant
  2. 确保项目配置正确appid 已设置

2. 测试场景

场景1首次进入自动发送欢迎消息 🆕

  1. 清除小程序缓存(开发者工具 -> 清缓存 -> 清除数据缓存)
  2. 重新进入聊天页面
  3. 预期结果
    • 页面加载完成后自动发送"你好"消息
    • 控制台显示"发送欢迎消息: 你好"
    • 消息列表中出现"你好"消息
    • 消息自动滚动到视图中

场景2重复进入不发送欢迎消息

  1. 在已发送过欢迎消息的情况下
  2. 退出聊天页面再重新进入
  3. 预期结果
    • 不会再次发送"你好"消息
    • 控制台显示"该用户的欢迎消息已发送过,跳过"

场景3用户在底部时的自动滚动

  1. 进入聊天页面
  2. 滚动到最底部
  3. 等待新消息到达(轮询刷新)
  4. 预期结果:新消息自动滚动到视图中

场景4用户在上方时保持位置

  1. 进入聊天页面
  2. 向上滚动查看历史消息
  3. 等待新消息到达(轮询刷新)
  4. 预期结果
    • 滚动位置保持不变
    • 显示新消息提醒气泡
    • 点击气泡可滚动到最新消息

场景5用户发送消息时的自动滚动

  1. 在聊天页面发送文本或图片消息
  2. 预期结果:自动滚动到刚发送的消息

3. 调试信息

已添加控制台日志,可在微信开发者工具的控制台中查看:

  • 滚动状态变化
  • 自动滚动触发情况
  • scrollToId 设置情况
  • 欢迎消息发送状态 🆕

4. 关键日志信息

滚动相关日志

  • 用户在底部准备自动滚动到消息ID: xxx - 触发自动滚动
  • 用户不在底部或无消息,保持当前位置 - 保持位置
  • 用户向上滚动设置isAtBottom为false - 状态变化
  • 用户滚动到底部当前isAtBottom状态: xxx - 到达底部

欢迎消息相关日志 🆕

  • 发送欢迎消息: 你好 - 开始发送欢迎消息
  • 欢迎消息发送成功 - 欢迎消息发送到服务器成功
  • 欢迎消息发送失败: xxx - 欢迎消息发送失败
  • 该用户的欢迎消息已发送过,跳过 - 重复进入时跳过发送
  • 用户信息不存在,无法发送欢迎消息 - 用户信息异常

技术实现

1. 智能滚动逻辑

// 智能滚动:先更新数据,再延迟设置滚动
that.setData(updateData);

if (that.data.isAtBottom && sortedList.length > 0) {
  setTimeout(() => {
    that.setData({
      scrollToId: lastMessageId
    });
  }, 50);
}

2. 欢迎消息发送逻辑 🆕

// 检查是否已发送过欢迎消息
const welcomeKey = `welcome_sent_${this.data.userInfo.openid}`;
const hasWelcomeSent = wx.getStorageSync(welcomeKey);

if (!hasWelcomeSent) {
  // 发送欢迎消息到服务器
  request('app/send_message', 'POST', {
    "app_id": accountInfo.miniProgram.appId,
    "content": JSON.stringify({ messages: '你好' }),
    "from_user_id": userInfo.openid,
    "from_user_name": userInfo.user_name,
    "msg_type": 1
  }).then(() => {
    // 成功后保存标记
    wx.setStorageSync(welcomeKey, true);
  });
}

3. 状态管理

  • isAtBottom: 标记用户是否在聊天底部
  • scrollToId: 控制滚动到指定消息
  • hasWelcomeMessageSent: 当前会话是否已发送欢迎消息
  • welcome_sent_${openid}: 本地存储标记,确保每个用户只发送一次
  • 延迟50ms确保DOM更新后再滚动

4. 触发时机

  • 已登录用户: 在 onLoad 中调用 getMessages().then(() => sendWelcomeMessage())
  • 静默登录用户: 在 silentLogin 成功后调用 getMessages().then(() => sendWelcomeMessage())