更新记录
v1.1.1(2023-11-30)
V1.1.1 解决H5火狐浏览器运行问题
v1.1.0(2023-11-24)
V1.1.0 1、IM uniapp demo支持安卓、iOS、H5、微信小程序 2、好友关系管理 3、黑名单管理 4、消息回复功能 5、消息转发能力 6、群聊@ 功能 7、群成员列表更新 8、系统通知优化 9、支持单聊直接创群
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
云信 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 的部分界面效果如下:
限时优惠活动
如果您通过 Dcloud 平台在云信控制台注册账号并开通 IM 服务,云信将提供特别的渠道版套餐,低至五折接入,可在开通账号后联系云信销售或技术支持。
点击 立即注册 前往云信控制台开通 IM 服务。
推荐有礼
推荐好友使用云信 IM 即时通讯产品,返佣奖励高至 20%,上不封顶!
点击 网易云信 8 周年庆 即可参与,合法致富机会,赶紧牢牢抓住!
Demo 体验
平台 | 二维码 |
---|---|
Android | ![]() |
iOS | ![]() |
小程序 | 即将发布 |
H5 | 点击 H5 Demo 在线体验地址 即可直接体验。 |
技术支持
网易云信提供多种服务,包括客服、技术支持、热线服务、全流程数据监控等,建议使用微信或企业微信扫码加入咨询群,我们的产品、技术、开发将协助接入、测试以及定制需求。
微信咨询 | 在线咨询 | 电话咨询 |
---|---|---|
![]() |
点击在线咨询 | 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 版本匹配)
准备工作
-
创建应用
-
注册 IM 测试账号
如仅需简单体验或者快速测试,请按照以下步骤在云信控制台创建测试账号。正式生产环境请通过云信服务端接口注册云信 IM 正式账号。
-
在控制台首页应用管理选择应用进入应用配置页面,然后单击 IM即时通讯 专业版下的功能配置按钮进入 IM 即时通讯配置页。
-
在顶部选择基础功能页签,单击测试账号管理下的子功能配置。
-
单击新建账号,在弹窗填写账号、昵称、密码后,单击确定。
在云信控制台创建的 IM 账户信息与服务端的账户信息相对应:
- 账号:
accid
- 密码:
token
- 昵称:
name
- 账号:
-
(可选)对于创建好的测试账号,您可以在控制台进行修改昵称,重置密码,以及禁用操作。
-
步骤1:创建项目
单击本页面右侧下载插件并导入HBuildX按钮后,在 HBuilderX 中创建 uni-app 项目。
Vue 版本请选择 v3。当右下角出现“项目[]创建成功”的提示时,表示项目已创建完成,可以进行下一步。
步骤2:配置项目
在 HBuilderX 中配置项目 App.vue
文件中的 appkey
、account
、token
。
如何获取请参考准备工作。
<script>
import RootStore from '@xkit-yx/im-store'
import { NimKitCore } from '@xkit-yx/core-kit/dist/uniapp-nim-core'
import { getMsgContentTipByType } from './utils/msg'
export default {
onLaunch: function() {
const nim = uni.$UIKitNIM = new NimKitCore({
initOptions: {
"appkey": "", //您在云信控制台注册的appkey
"account": "", //云信控制台上的account
"token": "",
"lbsUrls": [
"https://lbs.netease.im/lbs/webconf.jsp"
],
"linkUrl": "weblink.netease.im",
"needReconnect": true,
// "reconnectionAttempts": 5,
debugLevel: 'debug'
},
platform: 'UniApp',
})
uni.$UIKitStore = new RootStore(nim, {
addFriendNeedVerify: false,
teamBeInviteMode: 'noVerify',
teamJoinMode: 'noVerify',
teamUpdateExtMode: 'all',
teamUpdateTeamMode: 'all',
teamInviteMode: 'all',
sendMsgBefore: async (options, type) => {
const pushContent = getMsgContentTipByType({ body: options.body, type })
// 如果是 at 消息,需要走离线强推
const { forcePushIDsList, needForcePush } = options.ext?.yxAitMsg
// @ts-ignore
? store.msgStore._formatExtAitToPushInfo(options.ext?.yxAitMsg, options.body)
: { forcePushIDsList: '[]', needForcePush: false }
console.log('forcePushIDsList: ', forcePushIDsList)
// 不同产商的推送消息体
const { scene, to } = options
const pushPayload = JSON.stringify({
// oppo
oppoField: {
"click_action_type": 4, // 参考 oppo 官网
"click_action_activity": '', // 各端不一样 TODO
"action_parameters": { "sessionId": scene, "sessionType": to } // 自定义
},
// vivo
vivoField: {
"pushMode": 0 //推送模式 0:正式推送;1:测试推送,不填默认为0
},
// huawei
hwField: {
click_action: {
'type': 1,
'action': '' // 各端不一样 TODO
},
androidConfig: {
'category': 'IM',
'data': JSON.stringify({ 'sessionId': to, 'sessionType': scene })
}
},
// 通用
sessionId: to,
sessionType: scene
})
const pushInfo = {
needPush: true,
needPushBadge: true,
pushPayload: '{}',
pushContent,
needForcePush,
forcePushIDsList,
forcePushContent: pushContent,
}
return { ...options, pushInfo }
},
})
nim.connect()
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
配置完成后,等待 HBuilderX 将依赖安装完成。
步骤3:运行项目
在 HBuilderX 的运行选项中,根据实际情况选择运行的客户端。
源码集成
-
源码集成开发文档:源码集成
-
云信开源代码仓库:github 源码地址
-
API 参考:UIKitStore
云信推荐
云信 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 离线推送。