聊天对话框组件 ​

功能特性 ​

• 💬 文字聊天：支持发送和接收文字消息
• 🎤 语音聊天：支持录音和播放语音消息
• 💾 聊天记录：自动保存最近50条聊天记录到本地存储
• 🤖 智能回复：宠物会根据用户消息自动回复
• 🎨 现代化UI：美观的聊天界面设计
• 📱 响应式设计：适配不同屏幕尺寸
• 🌙 深色模式：支持系统深色模式

使用方法 ​

1. 在页面中引入组件 ​

{
  "usingComponents": {
    "chat-dialog": "/components/chat-dialog/chat-dialog"
  }
}

2. 在WXML中使用组件 ​

<chat-dialog 
  show="{{showChatDialog}}" 
  bind:close="onCloseChat"
/>

3. 在JS中处理事件 ​

Page({
  data: {
    showChatDialog: false
  },

  // 打开聊天窗口
  onOpenChat() {
    this.setData({
      showChatDialog: true
    })
  },

  // 关闭聊天窗口
  onCloseChat() {
    this.setData({
      showChatDialog: false
    })
  }
})

组件属性 ​

组件事件 ​

功能说明 ​

文字聊天 ​

• 在输入框中输入文字
• 点击发送按钮或按回车键发送消息
• 宠物会自动回复一条随机消息

语音聊天 ​

• 长按麦克风按钮开始录音
• 松开按钮停止录音
• 点击语音消息播放录音

聊天记录管理 ​

• 自动保存最近50条聊天记录
• 点击"清空"按钮可以清空所有记录
• 记录会持久化保存到本地存储

宠物回复 ​

宠物会根据用户的消息自动回复，回复内容包括：

• 收到你的消息啦！😊
• 我在听呢～
• 说得很有道理！👍
• 继续加油！💪
• 我支持你！❤️
• 今天也要开心哦！😄
• 你说得对！
• 我明白了～
• 好的，我知道了！
• 谢谢分享！🙏

注意事项 ​

1. 语音功能需要用户授权录音权限
2. 聊天记录保存在本地存储中，清除小程序数据会丢失记录
3. 语音文件是临时文件，小程序关闭后可能无法播放
4. 建议在真机上测试语音功能，模拟器可能不支持

样式定制 ​

组件使用CSS变量，可以通过以下方式定制样式：

/* 自定义主题色 */
:root {
  --chat-primary-color: #667eea;
  --chat-secondary-color: #764ba2;
  --chat-background-color: #f8f9fa;
}

更新日志 ​

v1.0.0 ​

• 初始版本发布
• 支持文字和语音聊天
• 自动保存聊天记录
• 智能宠物回复