更新记录

v10.2.0(2024-11-08) 下载此版本

会话页新增搜索框,方便用户搜索会话内容。 新增收藏消息功能。 优化日志打印模式,支持配置是否展示日志。 撤回消息时,支持配置撤回时间。

v10.1.0(2024-10-21) 下载此版本

消息支持已读回执。 群组会话支持设置免打扰。 支持标记消息,方便用户收藏关键消息。 支持发送文件消息。 好友名片支持添加备注。 群组信息支持设置群头像和群介绍。

v1.5.1(2024-05-28) 下载此版本

优化相关注释,提升接入效率

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

本文档介绍基于 Vue 框架快速集成源码。

云信 IM 介绍

网易云信 IM 即时通讯服务(以下简称 IM)基于网易二十余年的 IM 技术积累,致力于打造最稳定的即时通讯云平台。

IM 提供了一整套即时通讯基础能力。通过该平台服务您可以将即时通讯、实时网络能力快速集成至企业自身应用中。针对不同场景,IM 提供了一系列产品及技术解决方案,包括:客户端 IM 组件、客户端 IM 基础库、全平台 SDK 以及服务端 API 等。通过这些解决方案,企业可以直接在自身的应用中快速搭建出即时通讯产品,也可以构建出自己的即时通讯场景。

IM uni-app Demo 介绍

IM uni-app Demo 是基于网易云信 NIM SDK 的一款 uni-app Demo,支持 Android、iOS、H5 和微信小程序,它提供了一些通用功能,包含会话、聊天、群组等,您可以基于源码搭建自己的 IM 业务逻辑。

IM uni-app Demo 的部分界面效果如下:

通讯模块主要界面.png

uniapp.png

限时优惠活动

如果您通过 Dcloud 平台在 云信控制台 注册账号并开通 IM 服务,云信将提供特别渠道版套餐。

点击 立即注册 前往云信控制台注册后,云信销售会联系您进行开通。

推荐有礼

推荐好友使用云信 IM 即时通讯产品,返佣奖励高至 20%,上不封顶!

点击 网易云信 8 周年庆 即可参与,合法致富机会,赶紧牢牢抓住!

Demo 体验

平台 二维码
Android im-android-uniapp.png
iOS IM-iOS-uniapp.png
小程序
H5 点击 H5 Demo 在线体验地址 即可直接体验。

技术支持

网易云信提供多种服务,包括客服、技术支持、热线服务、全流程数据监控等,建议使用微信或企业微信扫码加入咨询群,我们的产品、技术、开发将协助接入、测试以及定制需求。

VX咨询 在线咨询 电话咨询
点击在线咨询 4009-000-123

快速开始

开发环境要求

  • HBuilderX 官方 IDE 1.9 及以上版本
  • Vue 3
  • TypeScript
  • sass(sass-loader 版本 <= 10.1.1)
  • node(12.13.0 <= node 版本 <= 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
  • npm(版本请与 node 版本匹配)

准备工作

  • 创建应用

    1. 登录网易云信 控制台

      如果您在 Dcloud 平台通过 此链接 登录云信控制台并成功注册账号开通 IM 服务,云信将提供特别的渠道版套餐,低至五折接入,可在开通账号后联系云信销售或技术支持。

    2. 如果您是首次登录控制台,控制台会弹出一个新手向导窗口,单击 去创建

    3. 完成实名认证后,在控制台首页单击 创建应用

      创建应用

    4. 填写应用的基本信息,如应用名称、行业类型和应用环境。

      应用信息

    5. 单击 确定 完成创建应用。

    6. 应用配置 导航栏中,单击 AppKey 管理 页签,查看该应用的 AppKey。

      查看应用的AppKey

  • 注册 IM 测试账号

    如仅需简单体验或者快速测试,请按照以下步骤在云信控制台创建测试账号。正式生产环境请通过云信 服务端接口 注册云信 IM 正式账号。

    1. 在控制台首页 应用管理 选择应用进入 应用配置 页面,然后单击 IM即时通讯 专业版 下的 功能配置 按钮进入 IM 即时通讯配置页。

    2. 在顶部选择 基础功能 页签,单击 测试账号管理 下的 子功能配置

    3. 单击 新建账号,在弹窗填写 账号昵称密码 后,单击 确定

      在云信控制台创建的 IM 账户信息与服务端的账户信息相对应:

      • 账号:accid
      • 密码:token
      • 昵称:name
    4. (可选)对于创建好的测试账号,您可以在控制台进行修改昵称,重置密码,以及禁用操作。

步骤1:创建项目

单击本页面右侧 下载插件并导入HBuildX 按钮后,在 HBuilderX 中创建 uni-app 项目

Vue3.png

当右下角出现“项目[]创建成功”的提示时,表示项目已创建完成,可以进行下一步。

步骤2:配置项目

在 HBuilderX 中配置项目 App.vue 文件中的 new NimKitCorenimCallKit.initConfignimCallKit.login 方法中的 appkeyaccounttoken
如何获取请参考 准备工作

uniapp配置项目.png

配置完成后,等待 HBuilderX 将依赖安装完成。

HBuilderX安装完成.png

步骤3:运行项目

在 HBuilderX 的运行选项中,根据实际情况选择运行的客户端。

运行.png

若需要体验 Demo 的音视频功能,需要使用 HBuilderX 制定自定义基座后,通过自定义基座运行项目。

源码集成

云信推荐

云信 IM UIKIt:基于 NIM SDK(网易云信 IM SDK)开发的一款即时通讯 UI 组件库,可助您快速集成包含 UI 界面的即时通讯应用,同时支持调用 NIM SDK 相应的接口实现即时通讯业务逻辑和数据处理。

常见问题

无法正常打开相册

相册拒绝授权后再次开启授权,由于 uni-app api 兼容问题,部分 Android 机型无法正常打开相册,需要用户自行处理。

iOS 低版本构建后无法运行

如果 iOS 低版本构建后无法运行,需在构建出的资源 dist/build/app/app-service.js 文件最前面添加 var globalThis = Function('return this')();

uni-app 兼容问题

部分 uni-app 兼容问题,已在代码中说明。

page 结构问题

由于 uni-app 自身的 uni.setNavigationBarTitle 限制,chat 页面的 NavigationBarTitle,需要您自行调整 page 结构设置。

uni-app 推送

uni-app 推送相关问题请参考 uni-app 离线推送

隐私、权限声明

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

相册权限(用于相机拍摄、相册图片视频发送功能)

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

不采集任何数据

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

无广告

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问