- 新增首次进入聊天页面自动发送"你好"消息功能 - 使用本地存储确保每个用户只发送一次欢迎消息 - 优化智能滚动逻辑,保持用户浏览位置 - 支持静默登录和已登录用户两种场景
4.6 KiB
4.6 KiB
聊天功能测试说明
功能更新内容
1. 自动滚动修复
已修复聊天页面自动刷新后自动滚动到底部的问题,现在实现智能滚动:
修复的问题
- ✅ 轮询刷新时不再强制滚动到底部
- ✅ 用户在底部时,新消息会自动滚动显示
- ✅ 用户在上方浏览历史消息时,保持当前位置
- ✅ 添加了延迟处理确保滚动生效
2. 自动发送欢迎消息 🆕
用户进入聊天页面时会自动发送"你好"消息给服务器:
新增功能
- ✅ 用户首次进入聊天页面时自动发送"你好"消息
- ✅ 使用本地存储确保每个用户只发送一次欢迎消息
- ✅ 支持静默登录和已登录用户两种场景
- ✅ 发送失败时不保存标记,下次可重试
修改的文件
pages/contact/index.js- 修改了滚动逻辑和添加了欢迎消息功能
测试步骤
1. 打开项目
- 使用微信开发者工具打开项目目录:
/Users/win/code2025/wx-chant - 确保项目配置正确,appid 已设置
2. 测试场景
场景1:首次进入自动发送欢迎消息 🆕
- 清除小程序缓存(开发者工具 -> 清缓存 -> 清除数据缓存)
- 重新进入聊天页面
- 预期结果:
- 页面加载完成后自动发送"你好"消息
- 控制台显示"发送欢迎消息: 你好"
- 消息列表中出现"你好"消息
- 消息自动滚动到视图中
场景2:重复进入不发送欢迎消息
- 在已发送过欢迎消息的情况下
- 退出聊天页面再重新进入
- 预期结果:
- 不会再次发送"你好"消息
- 控制台显示"该用户的欢迎消息已发送过,跳过"
场景3:用户在底部时的自动滚动
- 进入聊天页面
- 滚动到最底部
- 等待新消息到达(轮询刷新)
- 预期结果:新消息自动滚动到视图中
场景4:用户在上方时保持位置
- 进入聊天页面
- 向上滚动查看历史消息
- 等待新消息到达(轮询刷新)
- 预期结果:
- 滚动位置保持不变
- 显示新消息提醒气泡
- 点击气泡可滚动到最新消息
场景5:用户发送消息时的自动滚动
- 在聊天页面发送文本或图片消息
- 预期结果:自动滚动到刚发送的消息
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())