更新记录

1.0.0（2025-12-08） 下载此版本

首次发布

核心功能

  • ✅ 实时通讯（SSE）
  • ✅ 多媒体消息（文本/图片/视频/音频/文件）
  • ✅ 数据持久化（IndexedDB）
  • ✅ 链接自动识别
  • ✅ 表情支持
  • ✅ 多端适配（H5/小程序/App）

技术栈

  • Vue 3 + TypeScript
  • uni-app
  • TuniaoUI

代码质量

  • 主页面代码量：380 行（企业级重构）
  • 完整的类型定义
  • 清晰的注释文档

平台兼容性

uni-app(4.87)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ √ √ × × × × ×
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
× × × × × × × × × × ×

Mobile IM Uni-App

基于 uni-app + Vue3 + TypeScript 开发的跨平台即时通讯应用模板。

支持 H5、微信小程序、App 多端运行，提供完整的聊天功能实现。

✨ 特性

  • 🚀 跨平台：一套代码，多端运行（H5 / 小程序 / App）
  • 💬 实时通讯：基于 SSE（Server-Sent Events）实现实时消息推送
  • 📦 数据持久化：使用 IndexedDB 存储聊天记录（支持大文件 base64）
  • 🎨 组件化：高度组件化设计，易于定制和扩展
  • 📱 多媒体：支持文本、图片、视频、音频、文件消息
  • 🔗 链接解析：自动识别并渲染可点击链接
  • 😊 表情支持：内置表情面板
  • 🎯 TypeScript：完整的类型定义
  • 📚 企业级代码：清晰的目录结构，完善的注释文档

📸 预览

（建议添加应用截图）

🛠 技术栈

  • 框架：uni-app + Vue 3 + TypeScript
  • UI 库：TuniaoUI (图鸟UI)
  • 状态管理：Composition API
  • 实时通讯：SSE (Server-Sent Events)
  • 数据存储：IndexedDB (降级 LocalStorage)
  • 构建工具：Vite

📦 项目结构

mobile-im-uni/
├── components/              # 组件目录
│   ├── chat/               # 聊天相关组件
│   │   ├── ChatInput/      # 输入框组件
│   │   ├── ChatMessageItem/ # 消息项组件
│   │   ├── ChatUserList/   # 用户列表组件
│   │   ├── EmojiPanel/     # 表情面板
│   │   └── MoreActionsPanel/ # 更多操作面板
│   └── common/             # 通用组件
│       ├── CustomNavbar/   # 导航栏
│       ├── LinkPreview/    # 链接预览
│       └── FilePreview/    # 文件预览
├── composables/            # 组合式函数
│   ├── useSSE.ts          # SSE 连接管理
│   ├── useChat.ts         # 聊天核心逻辑
│   ├── useContentEditable.ts # H5 输入框光标管理
│   ├── useMediaUpload.ts  # 媒体上传
│   ├── useFileHandler.ts  # 文件处理
│   ├── useKeyboard.ts     # 键盘管理
│   └── usePanels.ts       # 面板管理
├── pages/                  # 页面目录
│   ├── index/             # 聊天主页
│   └── webview/           # WebView 页面（App 端）
├── utils/                  # 工具函数
│   ├── api.ts             # API 封装
│   ├── storage.ts         # 存储工具
│   ├── indexedDB.ts       # IndexedDB 封装
│   ├── user.ts            # 用户工具
│   ├── message/           # 消息相关工具
│   ├── file/              # 文件相关工具
│   └── media/             # 媒体相关工具
├── types/                  # TypeScript 类型定义
├── constants/              # 常量定义
├── styles/                 # 全局样式
└── config.example.ts       # 配置文件示例

主页面代码量：380 行（重构后）

🚀 快速开始

方法 A：使用一键设置脚本（推荐）

# 1. 运行设置脚本
./setup.sh

# 2. 编辑配置文件
vim config.ts  # 或使用你喜欢的编辑器

# 3. 运行项目
npm run dev:h5

方法 B：手动设置

1. 安装依赖

npm install

2. 配置后端接口

复制配置文件模板：

cp config.example.ts config.ts

编辑 config.ts，填入你的后端服务地址：

export const CONFIG = {
  SSE_BASE_URL: 'https://your-domain.com/sse/events',
  APP_ID: 'your-app-id',
  SEND_ALL_URL: 'https://your-domain.com/sse/send/all',
  SEND_ONE_URL: 'https://your-domain.com/sse/send/one',
  // ... 其他配置
}

⚠️ 重要：config.ts 包含敏感信息，已添加到 .gitignore，不会被提交到 Git。

3. 运行项目

# H5 端
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# App 端
# 使用 HBuilderX 打开项目，运行到真机或模拟器

📝 后端接口要求

SSE 接口

连接地址：GET /sse/events?userId={userId}&appId={appId}

返回格式：Server-Sent Events

data: {"type":"user_join","user":{"id":"xxx","nickname":"xxx","avatar":"xxx"}}

data: {"type":"message","data":{"suid":"xxx","tuid":"xxx","content":"消息内容"}}

消息发送接口

群发消息：POST /sse/send/all

私聊消息：POST /sse/send/one

请求体：

{
  "appId": "your-app-id",
  "suid": "发送者ID",
  "tuid": "接收者ID (私聊时必填)",
  "innerData": "消息内容"
}

文件上传接口

普通上传：POST /upload/v1/upload/one

分片上传：

  • 检查：POST /upload/v1/upload/chunk/check
  • 上传分片：POST /upload/v1/upload/chunk/index
  • 合并分片：POST /upload/v1/upload/chunk/merge

详细接口文档请参考 API.md

🎨 定制开发

修改 UI 样式

所有组件样式使用 SCSS 编写，可在各组件的 <style> 标签中修改。

全局样式变量定义在 styles/variables.scss。

添加新消息类型

  1. 在 types/chat.ts 中扩展 MessageType 类型
  2. 在 ChatMessageItem 组件中添加新类型的渲染逻辑
  3. 在 MoreActionsPanel 中添加发送入口

替换 UI 组件库

当前使用 TuniaoUI，如需替换：

  1. 卸载 @tuniao/tnui-vue3-uniapp
  2. 安装新的 UI 库
  3. 全局搜索 tn- 前缀，替换为新组件

📚 核心功能说明

消息存储

  • H5/App：优先使用 IndexedDB，支持存储大文件（base64）
  • 降级策略：IndexedDB 不可用时自动降级到 LocalStorage
  • 容量限制：默认保留最新 500 条消息

实时通讯

  • 基于 SSE（Server-Sent Events）实现
  • 自动重连机制
  • 心跳检测
  • 离线消息同步

多媒体消息

  • 图片：自动压缩，计算显示尺寸
  • 视频：显示时长、封面、播放按钮
  • 音频：显示文件名、时长、大小
  • 文件：支持下载、预览（部分格式）

跨平台差异处理

  • 输入框：H5 使用 contenteditable，App 使用 textarea
  • 文件操作：H5 直接下载，App 调用系统预览
  • 链接预览：H5 使用 iframe 弹窗，App 使用 WebView 页面

🔧 常见问题

Q: 如何修改消息保留数量？

在 constants/chat.ts 中修改 MAX_MESSAGES 常量。

Q: 如何添加自定义表情？

在 constants/chat.ts 的 EMOJI_LIST 数组中添加。

Q: 支持群聊吗？

支持。默认 GROUP_CHAT_ID = 'ALL' 为群聊，点击用户可切换私聊。

Q: 消息加密吗？

当前版本不包含端到端加密。如需加密，建议在发送前加密 content 字段。

📄 开源协议

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request。

📧 联系作者

（建议添加联系方式或项目主页链接）

如果这个项目对你有帮助，请给个 ⭐️ Star 支持一下！

隐私、权限声明

1. 本插件需要申请的系统权限列表：

图片、文件、视频、音频

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT License

Copyright (c) 2025 [Your Name]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

评论列表 撰写评论 向官方投诉

暂无用户评论。