更新记录

1.0.0（2025-07-17） 下载此版本

iOS 微信风格聊天组件

一个高度还原微信风格的 iOS 聊天列表和对话框组件，专为 uni-app 开发。

✨ 特性

• **

平台兼容性

uni-app(4.06)

uni-app x(4.06)

iOS 微信风格聊天组件

一个高度还原微信风格的 iOS 聊天列表和对话框组件，专为 uni-app 开发。

✨ 特性

• 🎨 微信风格设计 - 完美还原微信聊天界面的视觉效果
• 📱 iOS 优化 - 针对 iOS 平台进行了深度优化
• 💬 完整聊天功能 - 支持聊天列表、消息发送、表情包等
• 🔔 未读消息提醒 - 支持未读消息数量显示和静音标识
• 😊 表情包支持 - 内置丰富的表情包面板
• 🎤 语音输入 - 支持语音输入模式切换
• ⚡ 流畅动画 - 丝滑的页面切换和交互动画
• 📱 响应式设计 - 适配不同屏幕尺寸

🏗️ 组件结构

uni_modules/ios-wechat-chat/
├── components/
│   └── ios-wechat-chat/
│       └── ios-wechat-chat.vue     # 主组件
├── package.json                     # 组件配置
└── readme.md                       # 说明文档

🚀 快速开始

基础用法

<template>
  <view>
    <ios-wechat-chat />
  </view>
</template>

<script>
import iosWechatChat from '@/uni_modules/ios-wechat-chat/components/ios-wechat-chat/ios-wechat-chat.vue'

export default {
  components: {
    iosWechatChat
  }
}
</script>

🎯 功能特性

聊天列表

• ✅ 联系人头像显示（支持图片或首字母）
• ✅ 最后一条消息预览
• ✅ 消息时间智能显示
• ✅ 未读消息数量提醒
• ✅ 静音状态标识
• ✅ 点击进入聊天详情

聊天对话

• ✅ 消息气泡样式（自己/对方）
• ✅ 消息时间显示
• ✅ 实时消息发送
• ✅ 自动滚动到最新消息
• ✅ 模拟对方自动回复

输入功能

• ✅ 文字输入框
• ✅ 语音输入模式切换
• ✅ 表情包面板
• ✅ 发送按钮
• ✅ 更多功能按钮

表情包

• ✅ 丰富的 Emoji 表情
• ✅ 点击插入到输入框
• ✅ 面板显示/隐藏切换

📊 数据格式

聊天列表数据结构

{
  id: 1,                           // 聊天ID
  name: '张三',                    // 联系人姓名
  avatar: '',                      // 头像URL（可选）
  lastMessage: '你好，最近怎么样？',  // 最后一条消息
  lastMessageTime: 1234567890,     // 最后消息时间戳
  unreadCount: 2,                  // 未读消息数量
  isMuted: false                   // 是否静音
}

消息数据结构

{
  id: 1,                          // 消息ID
  content: '你好！',              // 消息内容
  time: 1234567890,               // 发送时间戳
  isSelf: false,                  // 是否为自己发送
  name: '张三',                   // 发送者姓名
  avatar: ''                      // 发送者头像
}

🎨 界面展示

聊天列表页面

• 微信绿色渐变导航栏
• 联系人头像和姓名
• 最后一条消息预览
• 智能时间显示（刚刚、分钟前、小时前、昨天、日期）
• 未读消息红色角标
• 静音图标显示

聊天详情页面

• iOS 风格导航栏（返回按钮、联系人姓名、更多按钮）
• 消息气泡（左侧对方消息、右侧自己消息）
• 消息时间显示
• 底部输入工具栏
• 表情包面板

输入工具栏

• 语音/文字输入切换
• 消息输入框
• 表情包按钮
• 更多功能按钮

⚙️ 自定义配置

样式变量

// 主题色彩
$wechat-green: #1aad19;          // 微信绿色
$message-bg: #ffffff;            // 消息背景色
$self-message-bg: #1aad19;       // 自己消息背景色

// 尺寸配置
$avatar-size: 48px;              // 头像尺寸
$message-avatar-size: 36px;      // 消息头像尺寸
$border-radius: 6px;             // 圆角大小

功能扩展

• 支持自定义聊天数据
• 支持自定义表情包
• 支持消息类型扩展（图片、语音、视频等）
• 支持主题色彩自定义

📱 平台兼容性

🎯 使用场景

• 即时通讯应用 - 聊天、社交类应用
• 客服系统 - 在线客服、咨询系统
• 企业内部沟通 - 办公、协作类应用
• 社区论坛 - 私信、讨论功能
• 电商平台 - 买家卖家沟通

⚠️ 注意事项

1. 数据持久化 - 当前为演示版本，实际使用需要对接后端API
2. 消息推送 - 需要集成推送服务实现实时消息
3. 文件上传 - 图片、语音等功能需要额外实现
4. 权限申请 - 语音功能需要申请麦克风权限
5. 性能优化 - 大量消息时建议实现虚拟滚动

📝 更新日志

v1.0.0 (2024-01-20)

• ✨ 初始版本发布
• ✅ 完整的聊天列表功能
• ✅ 聊天对话界面
• ✅ 消息发送和接收
• ✅ 表情包支持
• ✅ 微信风格UI设计

📦 分发说明

本组件采用 uni_modules 规范，支持：

• 一键导入到项目
• 自动配置组件路径
• 独立的版本管理
• 便于分享和分发

将整个 ios-wechat-chat 文件夹复制到目标项目的 uni_modules 目录即可使用。