IM 即时通讯（增强版）
uni-app
快速集成源码（uni-app）
更新时间： 2023/11/27 11:54:30
IM uni-app Demo 是基于网易云信 NIM SDK 的一款 uniapp Demo，它提供了一些通用的功能，包含会话、聊天、群组等，您可以基于源码搭建自己的 IM 业务逻辑。
界面效果
IM uni-app Demo 的部分界面效果如下：
平台支持
当前 IM uni-app Demo 仅支持 Android、iOS、H5、和微信小程序。
前提条件
开始跑通 Demo 之前，请确保：
-
已在云信控制台创建应用，获取 App Key。
-
已注册云信 IM 账号，获取 accid 和 token。
-
开发环境满足如下要求：
- HBuilderX
- 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：创建项目
创建 uni-app 项目，详情参见 uni-app 官网。
如已创建项目，请忽略本步骤。
步骤2：下载组件
下载 NEUIKit 组件。
# 找一个目录，clone 组件项目
git clone https://github.com/netease-kit/nim-uikit-uniapp.git
# 在自己的项目根目录下执行以下命令，将组件 copy 过来
mkdir -p ./pages/NEUIKit
# macOS
mv ${组件项目路径}/src ./pages/NEUIKit
# windows
move ${组件项目路径}/src .\pages\NEUIKit
下载成功后， 目录结构如下图所示：
步骤3：添加依赖和图片引入
在项目的根目录下添加依赖和图片引入。
npm init -y
npm i @xkit-yx/core-kit@0.10.8 @xkit-yx/im-store@0.0.14 @xkit-yx/utils@0.5.6 dayjs mobx pinyin vue-i18n --save
# 在自己的项目根目录下执行以下命令，将组件需要的图片复制到static目录下，若命令执行不成功，请按照路径手动复制
mkdir -p static
# macOS
cp -r pages/NEUIKit/src/static static/YX_IMG
# windows
xcopy /E pages\NEUIKit\src\static static\YX_IMG
步骤4：引入组件
在 App.vue 文件引入 NEUIKit 组件。
<script>
import RootStore from '@xkit-yx/im-store'
import { NimKitCore } from '@xkit-yx/core-kit/dist/uniapp-nim-core'
import { getMsgContentTipByType } from './pages/NEUIKit/src/utils/msg'
export default {
onLaunch: function() {
const nim = uni.$UIKitNIM = new NimKitCore({
initOptions: {
"appkey": "", //您在云信控制台注册的appkey
"account": "", //云信控制台上的account
"token": "", //云信控制台的账号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>
import i18n from './pages/NEUIKit/src/utils/i18n'
export function createApp() {
const app = createSSRApp(App)
app.use(i18n)
return {
app,
}
}
步骤5：配置路由
在 NEUIKit/src/utils/customNavigate.ts 中，修改 preUrl：
const preUrl = '/pages/NEUIKit/src'
在 pages.json 文件中的更新 pages 路由：
{
"pages": [
{
"path": "pages/NEUIKit/src/pages/Conversation/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/Group/group-set/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/Group/group-set/group-info-edit",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/Contact/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/Contact/contact-list/group-list",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/Chat/index",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true,
"app-plus": {
"softinputMode": "adjustResize"
}
}
},
{
"path": "pages/NEUIKit/src/pages/Group/group-member/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/Group/group-create/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/Group/group-add/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/user-card/friend/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/user-card/my/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/user-card/my/setting",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/user-card/my-detail/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/NEUIKit/src/pages/user-card/detail-item/index",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black"
},
"tabBar": {
"backgroundColor": "#F6F8FA",
"color": "#999999",
"selectedColor": "#337EFF",
"height": "60px",
"list": [
{
"text": "消息",
"iconPath": "static/YX_IMG/conversation.png",
"selectedIconPath": "static/YX_IMG/conversation-selected.png",
"pagePath": "pages/NEUIKit/src/pages/Conversation/index"
},
{
"text": "通讯录",
"iconPath": "static/YX_IMG/contact.png",
"selectedIconPath": "static/YX_IMG/contact-selected.png",
"pagePath": "pages/NEUIKit/src/pages/Contact/index"
},
{
"text": "我的",
"pagePath": "pages/NEUIKit/src/pages/user-card/my/index",
"iconPath": "static/YX_IMG/me.png",
"selectedIconPath": "static/YX_IMG/me-selected.png"
}
]
}
}
步骤6：运行 Demo
相关参考
Demo 源码地址
请前往云信开源代码仓库获取源码。
API 参考
IM uni-app Demo 基于 UIKitStore 开发，相关 API 详情请参见 UIKitStore。
常见问题
无法正常打开相册
相册拒绝授权后再次开启授权，由于 uniapp api 兼容问题，部分 Android 机型无法正常打开相册，需要用户自行处理。
iOS 低版本构建后无法运行
如果 iOS 低版本构建后无法运行，需在构建出的资源 dist/build/app/app-service.js 文件最前面添加 var globalThis = Function('return this')();。
uniapp 兼容问题
部分 uniapp 兼容问题，已在代码中说明。
page 结构问题
由于 uniapp 自身的 uni.setNavigationBarTitle 限制，chat 页面的 NavigationBarTitle，需要您自行调整 page 结构设置。
uniapp 推送
uni-app 推送相关问题请参考uni-app 离线推送。
此文档是否对你有帮助？
有帮助
去反馈