【鸿蒙实战开发】一多开发实例(即时通讯)

往期推文全新看点

一多即时通讯场景概述

本文从目前流行的垂类市场中,选择即时通讯应用作为典型案例详细介绍 “一多” 在实际开发中的应用。一多即时通讯应用的核心功能为用户交互,主要包含对话聊天、通讯录,社交圈等交互功能。开发者在开发"一多"应用时,经常会遇见多端适配上的问题,本文选择了即时通讯应用的一个常见问题,提供了推荐的解决方案,开发者在"一多"开发中遇见同类问题时可以快速解决。

  • 聊天场景如何进行布局设计

当前系统的产品形态主要有手机、折叠屏、平板和2in1四种,下文的具体实践也将围绕这四种产品形态展开,同时将分别从UX设计、页面开发两个角度给出符合“一多”的参考样例,介绍“一多”即时通讯应用在开发过程中的最佳实践。

  • 架构设计章节介绍一多项目的三层架构,开发者可以去相关链接了解。
  • UX设计章节介绍即时通讯应用的聊天场景的交互逻辑,对于类似的设计要点,开发者可以直接拿来使用。
  • 页面开发章节主要介绍聊天场景的布局能力,介绍如何实现聊天场景,如何适配多设备。

架构设计

HarmonyOS的分层架构主要包括三个层次:产品定制层、基础特性层和公共能力层,为开发者构建了一个清晰、高效、可扩展的设计架构。

UX设计

一多即时通讯应用包含聊天、通讯录,社交圈等交互功能,其中聊天页包含分栏布局设计,因此这里给出聊天页的业务逻辑。

一多即时通讯场景包含以下设计能力:侧边导航、分栏布局。

页面开发

以聊天页为典型页面进行展开,聊天页中包含侧边导航与分栏布局的设计能力,本文着重介绍聊天页如何实现分栏布局。

布局能力

聊天页在不同断点下的UX效果如下,涉及的设计能力是侧边导航,分栏布局。侧边导航参考侧边导航,其中会有详细介绍。

在手机和折叠屏折叠状态设备上,受屏幕大小限制,不能实现分栏布局,需要通过点击或者其他方式跳转到另一个页面,但是在折叠屏展开状态、平板及2ni1产品中屏幕尺寸足够大,可以分栏显示不同的内容,为了使操作更加便捷,在IM对话页中使用分栏布局实现对话功能。

示意图如下:

示意图 sm md lg
设计能力点
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值