邹方成
908502d5c1
- 新增首次进入聊天页面自动发送"你好"消息功能 - 使用本地存储确保每个用户只发送一次欢迎消息 - 优化智能滚动逻辑，保持用户浏览位置 - 支持静默登录和已登录用户两种场景
137 lines
4.6 KiB
Markdown
137 lines
4.6 KiB
Markdown
# 聊天功能测试说明
|
||
|
||
## 功能更新内容
|
||
|
||
### 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. 智能滚动逻辑
|
||
```javascript
|
||
// 智能滚动：先更新数据，再延迟设置滚动
|
||
that.setData(updateData);
|
||
|
||
if (that.data.isAtBottom && sortedList.length > 0) {
|
||
setTimeout(() => {
|
||
that.setData({
|
||
scrollToId: lastMessageId
|
||
});
|
||
}, 50);
|
||
}
|
||
```
|
||
|
||
### 2. 欢迎消息发送逻辑 🆕
|
||
```javascript
|
||
// 检查是否已发送过欢迎消息
|
||
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())` |