IM UIKit 升级指南 - IM 即时通讯 UIKit

开发者中心

IM 即时通讯 UIKit

集成开发

IM UIKit 升级指南

更新时间： 2024/10/29 13:48:43

本文介绍适配 Web 即时通讯应用的 IM UIKit 如何从 9.x.x 低版本升级至 10.x.x 系列版本。

架构调整

IM UIKit 10.x.x 系列版本底层适配了新版 10.x.x 系列版本 NIM SDK。版本升级涉及组件的架构调整，具体如下：

WebUIKit 架构升级

UIKit 层保留原始包（@xkit-yx/im-kit-ui），升级版本即可使用。
响应层使用新包（@xkit-yx/im-store-v2），接口基本与之前一致，使用方式也一致，仅部分接口名以及入参回参有所调整，具体请查看最新 API。
由于不需要兼容 IM1 SDK 与 IM Elite SDK，对兼容层做简化，省去 core-kit。
由于呼叫组件只兼容 IM1 SDK，并不支持 IM V10 SDK，因此采取以下方案：
- 对 @xkit-yx/call-kit 包进行升级，其中的单人呼叫兼容 IM V10 SDK，群组呼叫与之前一样仍然只兼容 IM1 SDK。
- 对 @xkit-yx/call-kit-react-ui 包进行升级，兼容 IM V10 SDK。
- @xkit-yx/call-kit-wx-ui 包未升级，仍只兼容 IM1 SDK。

展示层

UIKit 层保留原始包（@xkit-yx/im-kit-ui），升级版本即可使用。@xkit-yx/im-kit-ui 的变更主要包括以下：

初始化相关参数变更
chat-kit 会话消息组件参数变更
conversation-kit 会话列表组件参数变更
contact-kit 通讯类组件参数变更
search-kit 搜索组件参数变更

初始化相关参数变更

初始化 UIKit 的入参变更，具体请参考初始化。

单击查看示例代码。

JavaScriptimport React from 'react'
import { Provider } from '@xkit-yx/im-kit-ui'
import V2NIM from 'nim-web-sdk-ng'

const account = ''
const token = ''
const appkey = ''

const App = () => {
const nim = useMemo(() => {
    const nim = V2NIM.getInstance({
    appkey,
    account,
    token,
    debugLevel: 'debug',
    apiVersion: 'v2',
    })
    return nim
}, [account, token, appkey])

return (
    <Provider nim={nim}>
    <div className="app">……</div>
    {/* 其他 UI Kit 组件 */}
    </Provider>      <div className="app">……</div>    </Provider>
)
}

初始化中的 LocalOptions 参数变更。

单击查看具体参数说明。

JavaScriptinterface LocalOptions {
    /**
    添加好友模式，默认需要验证
    */
    addFriendNeedVerify: boolean;
    /**
    群组邀请模式，默认管理员可邀请
    */
    teamInviteMode: V2NIMTeamInviteMode;
    /**
    群组加入模式，默认无需验证
    */
    teamJoinMode: V2NIMTeamJoinMode;
    /**
    群组被邀请模式，默认需要验证
    */
    teamAgreeMode: V2NIMTeamAgreeMode;
    /**
    群组更新模式，默认管理员可修改
    */
    teamUpdateTeamMode: V2NIMTeamUpdateInfoMode;
    /**
    群组更新自定义字段模式，默认管理员可修改
    */
    teamUpdateExtMode: V2NIMTeamUpdateExtensionMode;
    /**
    是否需要@消息提醒，默认 true
    */
    needMention: boolean;
    /**
    转让群主的同时是否退出群聊，默认 false
    */
    leaveOnTransfer: boolean;
    /**
    是否允许群主转让，默认 false
    */
    allowTransferTeamOwner: boolean;
    /**
    是否显示在线离线状态，默认 true
    */
    loginStateVisible: boolean;
    /**
    * 发送消息前的钩子函数，异步函数
    * @param options 消息的发送参数
    * @returns Promise 处理后的发送参数
    */
    /**
      是否需要显示 p2p 消息、p2p 会话列表消息已读未读，默认 false
      */
    p2pMsgReceiptVisible?: boolean;
    /**
      是否需要显示群组消息已读未读，默认 false
    */
    teamMsgReceiptVisible?: boolean;
    /**
      是否需要显示群管理员相关主动功能，默认 false
    */
    teamManagerVisible?: boolean;
    /**
      单个群管理员默认数量限制，默认 10 个
    */
    teamManagerLimit?: number;
    sendMsgBefore: (params: any) => Promise<V2NIMSendMessageParams>;
}

Provider 参数变更。

单击查看具体参数说明。

JavaScriptinterface ProviderProps {
  // 子组件
  children: ReactNode
  // 本地配置，参考上文
  localOptions?: Partial<LocalOptions>
  // IM V10 SDK 实例
  nim: V2NIM
  // 单例模式，多个 Provider 使用同一个 store 实例，并且在 Provider 组件销毁时，不会销毁 store 实例
  singleton?: boolean
  // 国际化
  locale?: 'zh' | 'en'
  // 国际化的更详细的配置
  localeConfig?: { [key in keyof typeof zh]?: string }
  // 自定义渲染 im 断线时的样式
  renderImDisConnected?: () => JSX.Element
  // 自定义渲染 IM 连接中的样式
  renderImConnecting?: () => JSX.Element
}

会话消息组件参数变更

chat-kit 参数变更。

单击查看具体参数说明。

JavaScriptinterface ChatContainerProps {
  /**
    自定义选中的会话 conversationId。一般不用传，内部会处理好选中逻辑
    */
  selectedConversation?: string
  /**
    消息发送按钮组配置，不传使用默认的配置
    */
  actions?: Action[]
  /**
    单聊消息页面右侧设置栏按钮自定义，不传使用默认的配置
    */
  p2pSettingActions?: ChatSettingActionItem[]
  /**
    群聊消息页面右侧设置栏按钮自定义，不传使用默认的配置
    */
  teamSettingActions?: ChatSettingActionItem[]
  /**
   自定义渲染 消息右键菜单
   */
  msgOperMenu?: MsgOperMenuItem[]
  /**
    发送文字消息的回调，一般用于默认的文字发送缺少想要的字段时
    */
  onSendText?: (data: {
    value: string
    conversationType: V2NIMConversationType
    receiverId: string
  }) => Promise<void>
  /**
   转让群主后的回调
   */
  afterTransferTeam?: (teamId: string) => Promise<void>
  /**
   自定义渲染未选中任何会话时的内容
   */
  renderEmpty?: () => JSX.Element
  /**
   自定义点对点聊天消息渲染
   */
  renderP2pCustomMessage?: (
    options: RenderP2pCustomMessageOptions
  ) => JSX.Element | null | undefined
  /**
   自定义群组聊天消息渲染
   */
  renderTeamCustomMessage?: (
    options: RenderTeamCustomMessageOptions
  ) => JSX.Element | null | undefined
  /**
   自定义渲染 header
   */
  renderHeader?: (conversation: V2NIMConversation) => JSX.Element
  /**
   自定义渲染 p2p 聊天输入框 placeholder
   */
  renderP2pInputPlaceHolder?: (conversation: V2NIMConversation) => string
  /**
   自定义渲染群组聊天输入框 placeholder
   */
  renderTeamInputPlaceHolder?: (params: {
    conversation: V2NIMConversation
    mute: boolean
  }) => string
  /**
   自定义渲染群组成员 item
   */
  renderTeamMemberItem?: (
    params: GroupItemProps
  ) => JSX.Element | null | undefined
  /**
   自定义渲染消息头像
   */
  renderMessageAvatar?: (
    msg: V2NIMMessageForUI
  ) => JSX.Element | null | undefined
  /**
   自定义渲染消息昵称
   */
  renderMessageName?: (msg: V2NIMMessageForUI) => JSX.Element | null | undefined
  /**
   自定义渲染消息内容，气泡样式也需要自定义
   */
  renderMessageOuterContent?: (
    msg: V2NIMMessageForUI
  ) => JSX.Element | null | undefined
  /**
   自定义渲染消息内容，气泡样式不需要自定义
   */
  renderMessageInnerContent?: (
    msg: V2NIMMessageForUI
  ) => JSX.Element | null | undefined

  /**
   样式前缀
   */
  prefix?: string
  /**
     公共样式前缀
     */
  commonPrefix?: string
}

会话列表组件参数变更

conversation-kit 参数变更。

单击查看具体参数说明。

JavaScriptinterface ConversationContainerProps {
  /**
   样式前缀
   */
  prefix?: string
  /**
   公共样式前缀
   */
  commonPrefix?: string
  /**
   会话单击事件
   */
  onConversationItemClick?: (id: string) => void
  /**
   会话删除事件
   */
  onConversationItemDeleteClick?: (id: string) => void
  /**
   会话置顶状态改变事件
   */
  onConversationItemStickTopChange?: (id: string, isTop: boolean) => void
  /**
   会话免打扰状态改变事件
   */
  onConversationItemMuteChange?: (id: string, mute: boolean) => void
  /**
   自定义渲染会话列表为空时内容
   */
  renderConversationListEmpty?: () => JSX.Element | null | undefined
  /**
   自定义渲染会话类型是单聊的内容
   */
  renderCustomP2pConversation?: (
    options: {
      conversation: V2NIMConversation
    } & ConversationCallbackProps
  ) => JSX.Element | null | undefined
  /**
   自定义渲染会话类型是群聊的内容
   */
  renderCustomTeamConversation?: (
    options: {
      conversation: V2NIMConversation
    } & Omit<ConversationCallbackProps, 'onConversationItemMuteChange'>
  ) => JSX.Element | null | undefined
  /**
   自定义会话名称。如果 p2p 会话定义了 renderCustomP2pConversation 或群组会话定义了 renderCustomTeamConversation 则不生效。
   */
  renderConversationName?: (options: {
    conversation: V2NIMConversation
  }) => JSX.Element | null | undefined
  /**
   自定义会话消息。如果 p2p 会话定义了 renderCustomP2pConversation 或群组会话定义了 renderCustomTeamConversation 则不生效。
   */
  renderConversationMsg?: (options: {
    conversation: V2NIMConversation
  }) => JSX.Element | null | undefined
  /**
   自定义 p2p 会话头像。如果定义了 renderCustomP2pConversation 则不生效。
   */
  renderP2pConversationAvatar?: (options: {
    conversation: V2NIMConversation
  }) => JSX.Element | null | undefined
  /**
   自定义群组会话头像。如果定义了 renderCustomTeamConversation 则不生效。
   */
  renderTeamConversationAvatar?: (options: {
    conversation: V2NIMConversation
  }) => JSX.Element | null | undefined
}

通讯类组件参数变更

contact-kit 通讯类组件参数变更：

ContactListContainer 参数变更。

单击查看具体参数说明。

JavaScriptinterface ContactListContainerProps {
  /**
  样式前缀
  */
  prefix?: string
  /**
  通讯录导航单击事件
  */
  onItemClick?: (contactType: ContactType) => void
  /**
  自定义渲染通讯录导航
  */
  renderCustomContact?: (
    contactType: ContactType
  ) => JSX.Element | null | undefined
}

ContactInfoContainer 参数变更。

单击查看具体参数说明。

JavaScriptinterface ContactInfoContainerProps {
  /**
    单击发送消息后的事件
    */
  afterSendMsgClick?: () => void
  /**
  通过入群申请后的事件
  */
  afterAcceptApplyTeam?: (actionInfo: V2NIMTeamJoinActionInfoForUI) => void
  /**
    拒绝入群申请后的事件
    */
  afterRejectApplyTeam?: (actionInfo: V2NIMTeamJoinActionInfoForUI) => void
  /**
    通过入群邀请后的事件
    */
  afterAcceptTeamInvite?: (actionInfo: V2NIMTeamJoinActionInfoForUI) => void
  /**
    拒绝入群邀请后的事件
    */
  afterRejectTeamInvite?: (actionInfo: V2NIMTeamJoinActionInfoForUI) => void
  /**
    通过好友申请后的事件
    */
  afterAcceptApplyFriend?: (application: V2NIMFriendAddApplicationForUI) => void
  /**
    拒绝好友申请后的事件
    */
  afterRejectApplyFriend?: (application: V2NIMFriendAddApplicationForUI) => void
  /**
  好友单击事件
  */
  onFriendItemClick?: (account: string) => void
  /**
  黑名单单击事件
  */
  onBlackItemClick?: (account: string) => void
  /**
  群组单击事件
  */
  onGroupItemClick?: (team: V2NIMTeam) => void
  /**
    自定义渲染好友列表为空时内容
    */
  renderFriendListEmpty?: () => JSX.Element
  /**
      自定义渲染好友列表头部内容
      */
  renderFriendListHeader?: () => JSX.Element
  /**
  自定义渲染黑名单列表为空时内容
  */
  renderBlackListEmpty?: () => JSX.Element
  /**
    自定义渲染黑名单列表头部内容
    */
  renderBlackListHeader?: () => JSX.Element
  /**
    自定义渲染群组列表为空时内容
    */
  renderGroupListEmpty?: () => JSX.Element
  /**
    自定义渲染群组列表头部内容
    */
  renderGroupListHeader?: () => JSX.Element
  /**
  自定义渲染消息中心为空时内容
  */
  renderMsgListEmpty?: () => JSX.Element
  /**
    自定义渲染消息中心头部内容
    */
  renderMsgListHeader?: () => JSX.Element
  /**
  自定义渲染未选中任何列表时的内容
  */
  renderEmpty?: () => JSX.Element
  /**
    样式前缀
    */
  prefix?: string
  /**
    公共样式前缀
    */
  commonPrefix?: string
}

搜索组件参数变更

search-kit 搜索组件参数变更：

AddContainer 参数变更。

单击查看具体参数说明。

JavaScriptinterface AddContainerProps {
  /**
  单击去聊天回调，id 为 account 或者 teamId
  */
  onClickChat?: (id: string) => void

  /**
  样式前缀
  */
  prefix?: string

  /**
  公共样式前缀
  */
  commonPrefix?: string
}

SearchContainer 参数变更。

单击查看具体参数说明。

JavaScriptinterface SearchContainerProps {
  /**
  单击去聊天回调
  */
  onClickChat?: () => void

  /**
    样式前缀
    */
  prefix?: string

  /**
  公共样式前缀
  */
  commonPrefix?: string

  /**
  没有好友和群组时的状态展示
  */
  renderEmpty?: () => JSX.Element

  /**
  没有搜索结果时的自定义渲染
  */
  renderSearchResultEmpty?: () => JSX.Element
}

响应层

响应层使用新包（@xkit-yx/im-store-v2），接口基本与之前一致，使用方式也一致，仅部分接口名以及入参回参有所调整，具体请查看最新 API。

呼叫组件

@xkit-yx/call-kit-react-ui 升级到最新版本（0.6.0）即可接入 V10 版本 UIKit。

@xkit-yx/call-kit 升级到最新版本（3.0.0）即可接入 V10 版本 UIKit。

多语言配置

V10 版本的 UIKIt 支持设置多语言。

单击查看示例代码

const LocaleConfig = {
  // common
  saveText: '保存',
  setText: '设置',
  saveSuccessText: '保存成功',
  saveFailedText: '保存失败',
  addFriendSuccessText: '添加好友成功',
  applyFriendSuccessText: '申请添加好友成功',
  addFriendFailedText: '添加好友失败',
  applyFriendFailedText: '申请添加好友失败',
  okText: '确定',
  cancelText: '取消',
  deleteText: '删除',
  recallText: '撤回',
  forwardText: '转发',
  forwardFailedText: '转发失败',
  sendBtnText: '发送',
  replyText: '回复',
  commentText: '留言',
  recentSessionText: '最近访问',
  you: '您',
  deleteFriendText: '删除好友',
  confirmDeleteText: '确定删除？',
  confirmDeleteFriendText: '确定删除好友？',
  deleteFriendSuccessText: '删除好友成功',
  deleteFriendFailedText: '删除好友失败',
  blackText: '拉黑好友',
  removeBlackText: '解除拉黑',
  blackSuccessText: '拉黑成功',
  blackFailedText: '拉黑失败',
  removeBlackSuccessText: '解除拉黑成功',
  removeBlackFailedText: '解除拉黑失败',
  maxSelectedText: '最多只能选择',
  selectedText: '已选',
  friendsText: '位好友',
  strangerText: '位陌生人',
  emailErrorText: '邮箱格式不正确',
  uploadLimitText: '图片视频或文件大小最大支持',
  uploadLimitUnit: 'M',
  uploadImgFailedText: '上传图片失败',
  accountText: '账号',
  nickText: '昵称',
  genderText: '性别',
  phoneText: '手机',
  emailText: '邮箱',
  signText: '签名',
  accountPlaceholder: '请输入账号',
  teamIdPlaceholder: '请输入群组 ID',
  nickPlaceholder: '请输入昵称',
  genderPlaceholder: '请选择性别',
  phonePlaceholder: '请输入手机号',
  emailPlaceholder: '请输入邮箱',
  signPlaceholder: '请输入签名',
  searchInputPlaceholder: '搜索好友或群组',
  searchTeamMemberPlaceholder: '搜索群成员',
  searchText: '搜索',
  man: '男',
  woman: '女',
  unknow: '未知',
  welcomeText: '欢迎使用网易云信',
  notSupportMessageText: '暂不支持该消息',
  applyTeamText: '申请入群',
  applyTeamSuccessText: '申请入群成功',
  rejectText: '拒绝',
  acceptText: '同意',
  inviteTeamText: '邀请您加入群组',
  applyFriendText: '添加您为好友',
  acceptResultText: '已同意',
  rejectResultText: '已拒绝',
  expiredResultText: '已过期',
  beRejectResultText: '拒绝了好友申请',
  passResultText: '通过了好友申请',
  rejectTeamInviteText: '拒绝了群邀请',
  updateTeamAvatar: '更新了群头像',
  updateTeamName: '更新群名称为',
  updateTeamIntro: '更新了群介绍',
  updateTeamInviteMode: '更新了群权限“邀请他人权限”为',
  updateTeamUpdateTeamMode: '更新了群权限“群资料修改权限”为',
  updateAllowAt: '更新了“@所有人权限”为',
  updateTeamMute: '更新了“群禁言”为',
  onlyTeamOwner: '仅群主',
  teamAll: '所有人',
  closeText: '关闭',
  openText: '开启',
  inviteText: '邀请',
  aliasText: '备注',
  updateAliasSuccessText: '修改备注成功',
  updateAliasFailedText: '修改备注失败',
  sendText: '发送消息',
  noPermission: '您暂无权限操作',
  unreadText: '未读',
  readText: '已读',
  allReadText: '全部已读',
  amap: '高德地图',
  txmap: '腾讯地图',
  bdmap: '百度地图',
  callDurationText: '通话时长',
  callCancelText: '已取消',
  callRejectedText: '已拒绝',
  callTimeoutText: '已超时',
  callBusyText: '对方忙',
  cancelUploadFailedText: '取消上传失败',
  // conversation-kit
  onDismissTeamText: '群已被解散',
  onRemoveTeamText: '您已被移出群组',
  textMsgText: '文本消息',
  customMsgText: '自定义消息',
  audioMsgText: '音频消息',
  videoMsgText: '视频消息',
  fileMsgText: '文件消息',
  callMsgText: '话单消息',
  geoMsgText: '地理位置消息',
  imgMsgText: '图片消息',
  notiMsgText: '通知消息',
  robotMsgText: '机器消息',
  tipMsgText: '提示消息',
  unknowMsgText: '未知消息',
  deleteSessionText: '删除会话',
  muteSessionText: '开启免打扰',
  unmuteSessionText: '取消免打扰',
  deleteStickTopText: '取消置顶',
  addStickTopText: '置顶消息',
  beMentioned: '[有人@我]',

  // contact-kit
  teamListTitle: '我的群组',
  friendListTitle: '我的好友',
  blackListTitle: '黑名单',
  msgListTitle: '消息中心',
  blackListDesc: '（您不会收到列表中任何联系人的消息）',
  teamMenuText: '我的群组',
  friendMenuText: '我的好友',
  blackMenuText: '黑名单',
  msgMenuText: '消息中心',
  acceptedText: '已同意该申请',
  acceptFailedText: '同意该申请失败',
  rejectedText: '已拒绝该申请',
  rejectFailedText: '拒绝该申请失败',
  getApplyMsgFailedText: '获取消息失败',

  // search-kit
  addFriendText: '添加好友',
  createTeamText: '创建群组',
  joinTeamText: '加入群组',
  joinTeamSuccessText: '加入群组成功',
  beRemoveTeamText: '被移出群组',
  addButtonText: '添加',
  addSuccessText: '添加成功',
  addFailedText: '添加失败',
  createButtonText: '创建',
  createTeamSuccessText: '创建群组成功',
  createTeamFailedText: '创建群组失败',
  chatButtonText: '去聊天',
  getRelationFailedText: '获取关系失败',
  accountNotMatchText: '查无此账号',
  teamIdNotMatchText: '查无此群号',
  searchButtonText: '查找',
  searchTeamPlaceholder: '请输入群名称',
  teamTitle: '群名称',
  teamAvatarText: '群头像',
  addTeamMemberText: '添加成员',
  searchEmptyText: '您暂未添加好友和群组',
  searchNoResText: '暂无搜索结果',
  searchFriendTitle: '好友',
  searchTeamTitle: '群组',
  notSupportJoinText: '讨论组无法直接加入，请联系管理员拉您入群',

  // chat-kit
  sendToText: '发送给',
  sendUsageText: '（按 enter 直接发送，shift+enter 换行）',
  sendEmptyText: '不能发送空白消息',
  teamMutePlaceholder: '当前群聊禁言中',
  enterTeamText: '进入了群组',
  leaveTeamText: '离开了群组',
  teamMuteText: '群禁言',
  muteAllTeamSuccessText: '开启全员禁言成功',
  unmuteAllTeamSuccessText: '结束全员禁言成功',
  muteAllTeamFailedText: '开启全员禁言失败',
  unmuteAllTeamFailedText: '结束全员禁言失败',
  updateTeamSuccessText: '修改成功',
  updateTeamFailedText: '修改失败',
  leaveTeamSuccessText: '已成功退出此群',
  leaveTeamFailedText: '退出此群失败',
  dismissTeamSuccessText: '群解散成功',
  dismissTeamFailedText: '群解散失败',
  addTeamMemberSuccessText: '添加成员成功',
  addTeamMemberFailedText: '添加成员失败',
  addTeamMemberConfirmText: '请选择要添加的群成员',
  removeTeamMemberText: '移除成员',
  removeTeamMemberConfirmText: '是否确认移除该成员？',
  removeTeamMemberSuccessText: '移除成员成功',
  removeTeamMemberFailedText: '移除成员失败',
  teamTitleConfirmText: '群名称不能为空',
  teamAvatarConfirmText: '群头像不能为空',
  teamIdText: '群 ID',
  teamSignText: '群介绍',
  teamTitlePlaceholder: '请输入群名称',
  teamSignPlaceholder: '请输入内容',
  teamOwnerText: '群主',
  teamManagerText: '群管理员',
  teamManagerEditText: '人员管理',
  teamManagerEmptyText: '暂无群管理人员',
  teamOwnerAndManagerText: '群主和管理员',
  updateTeamManagerSuccessText: '修改群管理员成功',
  updateTeamManagerFailText: '修改群管理员失败',
  userNotInTeam: '成员已不在群中',
  teamMemberNotExist: '该群聊已不存在',
  teamManagerLimitText: '谁可以修改资料',
  teamInviteModeText: '谁可以邀请新成员',
  teamAtModeText: '谁可以@所有人',
  teamMemberText: '群成员',
  teamInfoText: '群资料',
  teamPowerText: '群管理',
  dismissTeamText: '解散群组',
  transferOwnerText: '转让群主',
  newGroupOwnerText: '成为新群主',
  beAddTeamManagersText: '被任命为管理员',
  beRemoveTeamManagersText: '被移除管理员',
  transferTeamFailedText: '转让群主失败',
  transferToText: '转让给',
  transferTeamSuccessText: '转让群主成功',
  transferOwnerConfirmText: '是否确认转让群主',
  dismissTeamConfirmText: '是否确认解散该群组',
  leaveTeamTitle: '离开群组',
  leaveTeamConfirmText: '是否确认退出该群组',
  personUnit: '人',
  leaveTeamButtonText: '删除并退出',
  sendMsgFailedText: '消息发送失败',
  getHistoryMsgFailedText: '获取历史消息失败',
  sendBlackFailedText: '您已被对方拉入黑名单',
  sendNotFriendFailedText: '当前非好友关系',
  recallMessageText: '撤回了一条消息',
  recallReplyMessageText: '该消息已撤回或删除',
  reeditText: '重新编辑',
  addChatMemberText: '添加聊天成员',
  chatHistoryText: '聊天记录',
  noMoreText: '没有更多消息了',
  receiveText: '您收到了新消息',
  strangerNotiText: '当前不是您的好友，请注意保护个人隐私安全。',
  nickInTeamText: '我在群里的昵称',
  editNickInTeamText: '编辑我在群里的昵称',
  updateMyMemberNickSuccess: '更新我的群昵称成功',
  updateMyMemberNickFailed: '更新我的群昵称失败',
  updateBitConfigMaskSuccess: '更新群消息免打扰成功',
  updateBitConfigMaskFailed: '更新群消息免打扰失败',
  imgText: '图片',
  videoText: '视频',
  onlineText: '[在线]',
  offlineText: '(离线)',

  // emoji 不能随便填，要用固定 key，，参考 demo
  Laugh: '[大笑]',
  Happy: '[开心]',
  Sexy: '[色]',
  Cool: '[酷]',
  Mischievous: '[奸笑]',
  Kiss: '[亲]',
  Spit: '[伸舌头]',
  Squint: '[眯眼]',
  Cute: '[可爱]',
  Grimace: '[鬼脸]',
  Snicker: '[偷笑]',
  Joy: '[喜悦]',
  Ecstasy: '[狂喜]',
  Surprise: '[惊讶]',
  Tears: '[流泪]',
  Sweat: '[流汗]',
  Angle: '[天使]',
  Funny: '[笑哭]',
  Awkward: '[尴尬]',
  Thrill: '[惊恐]',
  Cry: '[大哭]',
  Fretting: '[烦躁]',
  Terrorist: '[恐怖]',
  Halo: '[两眼冒星]',
  Shame: '[害羞]',
  Sleep: '[睡着]',
  Tired: '[冒星]',
  Mask: '[口罩]',
  ok: '[OK]',
  AllRight: '[好吧]',
  Despise: '[鄙视]',
  Uncomfortable: '[难受]',
  Disdain: '[不屑]',
  ill: '[不舒服]',
  Mad: '[愤怒]',
  Ghost: '[鬼怪]',
  Angry: '[发怒]',
  Unhappy: '[不高兴]',
  Frown: '[皱眉]',
  Broken: '[心碎]',
  Beckoning: '[心动]',
  Ok: '[好的]',
  Low: '[低级]',
  Nice: '[赞]',
  Applause: '[鼓掌]',
  GoodJob: '[给力]',
  Hit: '[打你]',
  Please: '[阿弥陀佛]',
  Bye: '[拜拜]',
  First: '[第一]',
  Fist: '[拳头]',
  GiveMeFive: '[手掌]',
  Knife: '[剪刀]',
  Hi: '[招手]',
  No: '[不要]',
  Hold: '[举着]',
  Think: '[思考]',
  Pig: '[猪头]',
  NoListen: '[不听]',
  NoLook: '[不看]',
  NoWords: '[不说]',
  Monkey: '[猴子]',
  Bomb: '[炸弹]',
  Cloud: '[筋斗云]',
  Rocket: '[火箭]',
  Ambulance: '[救护车]',
  Poop: '[便便]',
}

自定义渲染

由于部分接口返回参数字段名有所变更，因此使用官网现有的 自定义渲染的示例代码 时，可能会出现问题。若出现问题请提交工单联系网易云信技术支持工程师，官网的示例代码会在后续持续更新。

获取所有会话未读数

新版本中获取所有会话未读数的接口有所变化，请通过 store.conversationStore.totalUnreadCount 获取。

Vue 框架初始化代码变更

新版本中使用 Vue 框架的用户请参考以下示例代码进行初始化：

JavaScript// 引入组件和 IMUIKit 类
import { IMUIKit, ConversationContainer, ChatContainer } from '@xkit-yx/im-kit-ui'
import V2NIM from 'nim-web-sdk-ng'

// 引入样式
import '@xkit-yx/im-kit-ui/es/style';
import 'antd/dist/antd.less';

// 初始化 sdk 实例
const nim = V2NIM.getInstance({
  appkey: '',
  account: '',
  token: '',
  debugLevel: 'debug',
  apiVersion: 'v2',
})

// 初始化实例，传入初始化参数
const uikit = new IMUIKit({
  nim,
  singleton: true, // 单实例模式，需要传入 true 开启，开启后 Store 会使用单实例模式
})

// 获取 dom 节点 （您也可以通过 vue 的 ref 获取 dom）
const wrapper1 = document.getElementById('wrapper1')
const wrapper2 = document.getElementById('wrapper2')

// 渲染需要渲染的组件到指定的 dom 节点中，完成组件的默认界面搭建
uikit.render(ConversationContainer, null, wrapper1)
uikit.render(ChatContainer, null, wrapper2)

// 获取上下文
const { store, nim } = window.__xkit_store__

// 卸载组件
uikit.unmount(wrapper1)
uikit.unmount(wrapper2)

此文档是否对你有帮助？

有帮助

去反馈

架构调整
展示层
初始化相关参数变更
会话消息组件参数变更
会话列表组件参数变更
通讯类组件参数变更
搜索组件参数变更
响应层
呼叫组件
多语言配置
自定义渲染
获取所有会话未读数
Vue 框架初始化代码变更