更新记录

v0.0.1（2026-06-26） 下载此版本

v0.0.1 首次发布

平台兼容性

uni-app(3.8.0)

关于 im-uikit-uniapp-vue2

im-uikit-uniapp-vue2 是基于网易云信 IM SDK 的一款 uniapp UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。im-uikit-uniapp-vue2 本身基于 UIKitStore 开发，API 参考 UIKitStore。 im-uikit-uniapp-vue2 界面效果如下图所示：

im-uikit-uniapp-vue2 支持平台

• Android
• iOS
• H5
• 小程序

产品体验

• 在线演示

前提条件

创建应用并获取 App Key 和 App Secret

1. 在左侧导航栏中找到“应用”，并单击“创建”
   
   

   

2. 填写应用的基本信息后，单击“创建”
   
   

   

3. 创建应用后，可以在左侧导航栏中查看该应用，并单击 “App Key 管理”，并获取 App Key 和 App Secret
   
   

   

注册云信 IM 账号，获取 accid 和 token。accid 和 token 将用于登录云信服务端。

1. 在左侧导航栏中单击指定应用名称，进入该应用的详情页面

2. 在“功能管理”中单击“账号管理”
   

   

3. 在测试页面，单击“新建账号”，并填写账号（即 accid）、昵称（即 name）、密码（即 Token）后，单击“确定”
   
   

   

运行项目

开发环境要求

• HBuilderX
• Vue 2
• TypeScript
• sass（sass-loader 版本 <= 10.1.1）
• node（12.13.0 <= node 版本 <= 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
• npm（版本请与 node 版本匹配）

运行当前项目

在 App.vue 的 onLaunch 中调用 initIMUIKit，传入自己的 appkey、account 和 token 即可运行。

initIMUIKit({
  appkey: "your-appkey",
  account: "your-account",
  token: "your-token",
});

集成到自己的项目

如果需要把 IM UIKit 集成到已有 uni-app 项目，请参考官方集成文档：IM UIKit uni-app 集成指南。

运行效果

Andriod：

iOS：

目录结构详解

.
├── App.vue // 应用生命周期入口，初始化 IM UIKit
├── main.js // Vue2 应用入口
├── manifest.json // uni-app 应用配置，vueVersion 为 2
├── pages.json // 页面路由和 tabBar 配置
├── components // 公共组件
│   ├── Avatar.vue // 头像
│   ├── Badge.vue // 角标
│   ├── Empty.vue // 空白页
│   ├── FormInput.vue // 表单
│   ├── Icon.vue // Icon 图标
│   ├── MessageOneLine.vue // 单行消息展示
│   ├── Modal.vue // 弹窗
│   ├── NavBar.vue // 标题栏
│   ├── NetworkAlert.vue // 网络横幅
│   ├── PersonSelect.vue // 成员选择
│   ├── Tooltip.vue // 提示
│   └── UserCard.vue // 用户卡片
├── locale // 国际化文案配置
│   ├── en.json
│   ├── en.js
│   ├── zh-Hans.json
│   └── zh-Hans.js
├── pages // 页面
│   ├── Chat // 聊天页
│   │   ├── index.vue
│   │   ├── forward.vue
│   │   ├── message-read-info.vue
│   │   ├── video-play.vue
│   │   └── message // 消息相关组件
│   │       ├── face.vue // 表情选择
│   │       ├── message-bubble.vue // 消息气泡
│   │       ├── message-file.vue // 文件消息
│   │       ├── message-input.vue // 消息输入框
│   │       ├── message-item.vue // 单条消息
│   │       ├── message-list.vue // 消息列表
│   │       └── voice-panel.vue // 语音面板
│   ├── Contact // 通讯录页
│   │   ├── contact-list
│   │   │   ├── friend-list // 好友列表
│   │   │   ├── group-list.vue // 群列表
│   │   │   ├── valid-list.vue // 验证消息
│   │   │   └── black-list.vue // 黑名单
│   │   └── index.vue
│   ├── Conversation // 会话页
│   │   ├── conversation-list // 会话列表
│   │   ├── conversation-search // 会话搜索
│   │   └── index.vue
│   ├── Friend // 好友资料和添加好友页
│   ├── Login // 登录页
│   │   ├── components
│   │   │   ├── form-input.vue
│   │   │   ├── login-form.vue
│   │   │   └── welcome.vue
│   │   ├── i18n
│   │   │   └── zh-cn.js
│   │   ├── index.vue
│   │   ├── static
│   │   └── utils
│   │       └── api.js
│   ├── Team // 群创建、群设置、群成员管理
│   ├── User // 我的、好友资料、个人信息编辑
│   ├── index // 空白首页
│   └── styles // 公共样式
├── static // 静态图片资源
│   ├── contact-selected.png
│   ├── contact.png
│   ├── conversation-selected.png
│   ├── conversation.png
│   ├── me-selected.png
│   ├── me.png
│   └── ...
├── uni.scss // 全局样式变量
└── utils // 工具函数
    ├── init.js // IM UIKit 初始化、登录和 App 前后台逻辑
    ├── constants.js // 常量配置
    ├── store.js // UIKitStore
    ├── module // 内置 IM SDK 和 Store ESM 产物
    └── ...

常见问题

• 相册拒绝授权后再次开启授权，由于 uniapp api 兼容问题，部分 Android 机型无法正常打开相册，需要用户自行处理
• 如何替换图标：在 components/Icon.vue 的 urlMap 中维护图标 type 和图片地址的映射，然后引用 components/Icon 组件并传入对应 type，例如 <Icon type="icon-time" />。
• 如果 iOS 低版本构建后无法运行，需要在构建出的资源 dist/build/app/app-service.js 文件最前面添加 var globalThis = Function('return this')();