鸿蒙开发融云IMKit消息列表
融云鸿蒙版是不带UI的，得自己一步步搭建。融云后期好像也不会出带UI的库，还是早点自己弄吧
一、思路：
IMEngine.getInstance().getConversationListByPage获取
二、效果图：
三、关键代码：
- 获取列表数据：
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源码结构图：
接上图：
有问题或者需要完整源码的私信我