鸿蒙开发融云IMKit消息列表

鸿蒙开发融云IMKit消息列表

融云鸿蒙版是不带UI的，得自己一步步搭建。融云后期好像也不会出带UI的库，还是早点自己弄吧

一、思路：

IMEngine.getInstance().getConversationListByPage获取

二、效果图：

三、关键代码：

1. 获取列表数据：

public static loadConversationList(conversationCallback?: (arr: Conversation[]) => void) {
    let conTypeList = new List<ConversationType>();
    conTypeList.add(ConversationType.Private);
    conTypeList.add(ConversationType.System);

    let option: IGetConversationOption = {
      time: 0,
      count: 1000
    }

    IMEngine.getInstance().getConversationListByPage(conTypeList, option)
      .then(result => {
        logContent("congge1", result)
        if (EngineError.Success !== result.code) {
          // 获取会话列表失败
          return;
        }
        if (!result.data) {
          // 会话列表为空
          conversationCallback?.([])
          return;
        }

        let conList = result.data as List<Conversation>;
        conversationCallback?.(conList.convertToArray().filter(item => isNotEmptyString(item.objectName)))
      });
  }

2.ChatListItemView

@Component
export  struct ChatListItemView {
  @Prop customUnReadCount:number = 0
  @State chatItem: Conversation = new Conversation();
  @State imUserInfo:IMUserInfoDataBean = {}
  @State content:string = ''
  nowTimeEventId:number = Date.now()

  aboutToAppear(): void {
    if (this.chatItem.targetId){
      MMKVNoClearUtil.getImUserInfo(this.chatItem.targetId,(result)=>{
        this.imUserInfo = result
      })
    }
  }


  build() {
    RelativeContainer() {
      Image(this.imUserInfo.localPortrait?this.imUserInfo.localPortrait:this.imUserInfo.portrait)
        .width($r('app.integer.opt_layout_chat_view_profile_picture_width'))
        .height($r('app.integer.opt_layout_chat_view_profile_picture_height'))
        .borderRadius($r('app.integer.opt_layout_chat_view_profile_picture_radius'))
        .alt($r('app.media.ic_default'))
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .id("figure")

      if (this.chatItem.unreadMessageCount > 0 || this.customUnReadCount > 0) { // 红点消息大于0条时渲染红点
        Row() {
          Text(this.chatItem.unreadMessageCount > 0?`${this.chatItem.unreadMessageCount}`:`${this.customUnReadCount}`)
            .borderRadius($r('app.integer.layout_8'))
            .constraintSize({minWidth: $r('app.integer.opt_layout_chat_view_red_dot_width')})
            .height($r('app.integer.opt_layout_chat_view_red_dot_height'))
            .backgroundColor($r('app.color.color_red'))
            .fontSize($r('app.integer.text_font_10'))
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
        }
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .borderRadius($r('app.integer.layout_10'))
        .margin({ top: $r('app.integer.layout_minus_8'), left: $r('app.integer.layout_24') })
        .constraintSize({minWidth: $r('app.integer.opt_layout_chat_view_red_dot_container_width')})
        .height($r('app.integer.opt_layout_chat_view_red_dot_container_height'))
        .backgroundColor(Color.White)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .opacity((this.chatItem.unreadMessageCount > 0 || this.customUnReadCount > 0) ? 1 : 0)
        .id('badge')
      }

      Text(this.imUserInfo.name)
        .fontColor($r('app.color.color_black'))
        .fontSize($r('app.integer.opt_layout_chat_view_user_name_font_size'))
        .lineHeight($r('app.integer.layout_22'))
        .font({ weight: 450 })
        .margin({ top: $r('app.integer.layout_0'), left: $r('app.integer.chat_view_row_height') })
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .id('user')
      if (this.chatItem.lastSentTime > 0){
        Text(handlerMsgTime(this.chatItem.lastSentTime))
          .fontSize($r('app.integer.opt_layout_chat_view_item_padding_top'))
          .fontColor($r('app.color.color_aa'))
          .maxLines(1)
          .textAlign(TextAlign.End)
          .margin({ top: $r('app.integer.layout_0'), right: 12 })
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            right: { anchor: '__container__', align: HorizontalAlign.End }
          })
          .id('time')
      }

      Text(this.dealContent())
        .fontColor(!(this.chatItem.objectName === HQVoiceMessageObjectName && !MMKVNoClearUtil.getVoiceMessageReadStatus(this.chatItem.targetId,this.chatItem.lastMessageId))?$r('app.color.color_aa'):$r('app.color.color_red'))
        .fontSize($r('app.integer.text_font_14'))
        .lineHeight($r('app.integer.layout_19'))
        .maxLines(1)
        .textOverflow({
          overflow:TextOverflow.Ellipsis
        })
        .margin({ top: $r('app.integer.layout_24'), left: $r('app.integer.chat_view_row_height'),right:12 })
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right:{ anchor: '__container__', align: HorizontalAlign.End }
        })
        .id('msg')
    }
    .width('100%')
    .height($r('app.integer.opt_layout_chat_view_item_height'))
    .backgroundColor(Color.White)
    .padding({ left: 12, top: $r('app.integer.opt_layout_chat_view_item_padding_top'), bottom: $r('app.integer.opt_layout_chat_view_item_padding_bottom') })
    .onClick(() => {
        Router.pushChatDetailPage(this.chatItem.targetId,this.chatItem.conversationType)
    })
  }
  
  dealContent():string{
    if (this.chatItem.objectName) {
      this.content = getString($r('app.string.im_version_error_tip'))
      switch (this.chatItem.objectName){
        case TextMessageObjectName:
          this.content = ImUtils.dealMyTextContent(this.chatItem.content as TextMessage)
          break
        case ImageMessageObjectName:
          this.content = '[图片]'
          break
        case HQVoiceMessageObjectName:
          this.content = `[语音] ${(this.chatItem.content as HQVoiceMessage).duration}"`
          break
        case CustomizeGiftMessageObjectName:
          this.content = (this.chatItem.content as CustomizeGiftMessage).toUserId === MMKVUtil.getCurrentUserId()?getString($r('app.string.gift_send_to_one_tip')):getString($r('app.string.gift_send_one_tip'))
          break
      }

    }
    return this.content
  }

}

四、鸿蒙融云Demo源码结构图：

有问题或者需要完整源码demo的可以看简介联系我，也可以私信我，我每天都看私信的