升级指南

更新时间: 2024/05/17 18:03:08

本文介绍 IM UIKit V10.0.0 版本,Web 端升级的说明和注意事项。

概述

本次 IM UIKit V10.0.0 版本升级,旨在底层适配新版 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 展示层

UIKit 层保留原始包(@xkit-yx/im-kit-ui),升级版本即可使用。

@xkit-yx/im-kit-ui 的变更主要包括以下:

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

初始化相关参数变更

  • 初始化 UIKit 的入参变更,具体请参考初始化

    单击查看示例代码
    import 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 参数变更。

    单击查看具体参数说明
    interface 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 参数变更。

    单击查看具体参数说明
    interface 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 参数变更。

单击查看具体参数说明
interface 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 参数变更。

单击查看具体参数说明
interface 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 参数变更。

    单击查看具体参数说明
    interface ContactListContainerProps {
      /**
      样式前缀
      */
      prefix?: string
      /**
      通讯录导航点击事件
      */
      onItemClick?: (contactType: ContactType) => void
      /**
      自定义渲染通讯录导航
      */
      renderCustomContact?: (
        contactType: ContactType
      ) => JSX.Element | null | undefined
    }
    
  • ContactInfoContainer 参数变更。

    单击查看具体参数说明
    interface 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 参数变更。

    单击查看具体参数说明
    interface AddContainerProps {
      /**
      点击去聊天回调,id 为 account 或者 teamId
      */
      onClickChat?: (id: string) => void
    
      /**
      样式前缀
      */
      prefix?: string
    
      /**
      公共样式前缀
      */
      commonPrefix?: string
    }
    
  • SearchContainer 参数变更。

    单击查看具体参数说明
    interface SearchContainerProps {
      /**
      点击去聊天回调
      */
      onClickChat?: () => void
    
      /**
        样式前缀
        */
      prefix?: string
    
      /**
      公共样式前缀
      */
      commonPrefix?: string
    
      /**
      没有好友和群组时的状态展示
      */
      renderEmpty?: () => JSX.Element
    
      /**
      没有搜索结果时的自定义渲染
      */
      renderSearchResultEmpty?: () => JSX.Element
    }
    

UIKit 响应层

响应层使用新包(@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 框架的用户请参考以下示例代码进行初始化:

// 引入组件和 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)
此文档是否对你有帮助?
有帮助
去反馈
  • 概述
  • UIKit 展示层
  • 初始化相关参数变更
  • 会话消息组件参数变更
  • 会话列表组件参数变更
  • 通讯类组件参数变更
  • 搜索组件参数变更
  • UIKit 响应层
  • 呼叫组件
  • 多语言配置
  • 自定义渲染
  • 获取所有会话未读数
  • Vue 框架初始化代码变更