uniApp Vue2 即时通讯项目实践：一套开箱即用的 IM UIKit 解决方案

fix一个write十个
0 阅读2分钟

这套 UIKit 能解决什么问题？

如果你正在用 uniApp Vue2 开发即时通讯功能，可能会遇到这些问题：

  • 从零搭建 IM 太复杂：消息收发、会话管理、联系人、群组...每个模块都要自己写
  • 多端适配成本高：H5、App、微信小程序，每端都要单独处理兼容问题
  • 状态管理混乱：消息状态、会话状态、用户状态交织在一起，难以维护
  • 上线周期长：IM 功能开发往往需要数周甚至数月

这套 ChatUIKit 就是为了解决这些问题而生。

核心能力

1. 一套代码，多端运行

内置条件编译处理，自动适配 H5、App、微信小程序：

// H5 / App
<IndexedList :options="list">
  <template v-slot:indexedItem="{ item }">
    <UserItem :user="item" />
  </template>
</IndexedList>

// 微信小程序自动适配
<!-- #ifdef MP-WEIXIN -->
<scroll-view scroll-y>
  <UserItem v-for="item in list" :key="item.id" :user="item" />
</scroll-view>
<!-- #endif -->

2. 模块化状态管理

基于 Vuex 的模块化 Store 架构，职责清晰：

stores/
├── conn.js        # 连接状态
├── message.js     # 消息管理
├── conversation.js # 会话列表
├── contact.js     # 联系人
├── group.js       # 群组
├── appUser.js     # 用户信息
└── config.js      # 配置管理

简洁的 API 设计：

// 发送消息
this.$store.dispatch('message/sendTextMessage', {
  to: 'userId',
  chatType: 'singleChat',
  msg: 'Hello World'
})

// 获取联系人
this.$store.dispatch('contact/getContactsFromServer')

// 监听事件
uni.$on('chatOnNewMessage', (msg) => { ... })

3. 完整功能覆盖

功能说明
即时消息文本、图片、语音、视频、文件、自定义消息
会话管理置顶、删除、免打扰、未读数、草稿
联系人添加、删除、黑名单、好友申请处理
群组群组列表、创建群组
用户属性头像、昵称、在线状态
消息操作撤回、编辑、引用

快速集成（15 分钟）

Step 1：安装依赖

npm install easemob-websdk vuex pinyin-pro easemob-uniapp-logger-plugin

Step 2：复制 ChatUIKit 到项目

cp -r ChatUIKit-vue2 your-project/ChatUIKit

Step 3：初始化

// main.js
import Vue from 'vue'
import ChatUIKit, { store } from './ChatUIKit'
import { t, i18n } from './ChatUIKit/locales'

i18n.init()
Vue.prototype.$ChatUIKit = ChatUIKit
Vue.prototype.$t = t

new Vue({ store, ...App }).$mount()

Step 4：配置页面

// pages.json
{
  "pages": [
    { "path": "pages/login/index" },
    { "path": "ChatUIKit/modules/Conversation/index" },
    { "path": "ChatUIKit/modules/ContactList/index" },
    { "path": "pages/chat/index" }
  ]
}

就这样，一个完整的 IM 应用框架就搭建完成了！

常见问题处理

1. 微信小程序 slot 限制

Vue2 在小程序中对 scoped slot 支持有限，UIKit 内部已通过条件编译处理，直接使用即可。

2. 静态资源路径

小程序环境下建议使用绝对路径或 require 引入静态资源。

适用场景

  • 已有 uniApp Vue2 项目需要集成 IM 功能
  • 团队对 Vue2 技术栈更熟悉，希望快速交付
  • 需要同时支持 H5、App、微信小程序
  • 希望减少 IM 功能开发周期

项目信息

avatar
文章
阅读
粉丝