更新记录

v1.4.0(2024-03-27)

支持语音消息录制、播放、发送 支持视频消息发送、播放 支持群管理 支持群主转让 支持群昵称设置能邓丽

v1.3.0(2024-03-04)

单SDK同时支持vue2与vue3

v1.2.0(2024-01-05)

支持IM Uniapp 适配vue2

查看更多

平台兼容性

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 服务。

推荐有礼

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

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

Demo 体验

平台 二维码
Android
iOS
小程序
H5 点击 H5 Demo 在线体验地址 即可直接体验。

技术支持

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

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

快速开始

开发环境要求

  • HBuilderX 官方 IDE 1.9 及以上版本
  • Vue 2/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 项目

Vue.png

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

步骤2:配置项目

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

uniapp配置项目.png

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

HBuilderX安装完成.png

步骤3:运行项目

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

运行.png

源码集成

云信推荐

云信 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协议

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