快速集成源码(uni-app)

更新时间: 2023/11/27 11:54:30

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

界面效果

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

通讯模块主要界面.png

Demo.png

平台支持

当前 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

运行.png

相关参考

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 离线推送

此文档是否对你有帮助?
有帮助
去反馈
  • 界面效果
  • 平台支持
  • 前提条件
  • 源码集成
  • 步骤1:创建项目
  • 步骤2:下载组件
  • 步骤3:添加依赖和图片引入
  • 步骤4:引入组件
  • 步骤5:配置路由
  • 步骤6:运行 Demo
  • 相关参考
  • Demo 源码地址
  • API 参考
  • 常见问题
  • 无法正常打开相册
  • iOS 低版本构建后无法运行
  • uniapp 兼容问题
  • page 结构问题
  • uniapp 推送