多设备即时通讯界面

概述

本文从当前常见的多设备应用场景中，选取即时通讯行业应用作为典型案例，详细介绍”一多”在实际开发中的应用。

即时通讯应用的核心功能是用户交互，主要功能模块包含对话聊天、通讯录和社交圈等交互功能。开发者在开发”一多”应用时，经常面临多端适配问题。本文针对即时通讯应用的常见多端适配问题，提供解决方案。

应用当前已适配的设备包括：直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板和电脑。

阅读本文前，开发者需熟悉ArkUI（方舟UI框架）和一次开发，多端部署概览相关知识。

下文将从UX设计、工程管理、页面开发三个角度，介绍即时通讯应用在多设备开发中的最佳实践。

• UX设计：介绍即时通讯应用的交互逻辑和通用设计要点，对于类似的设计要点，开发者可以直接参考。
• 工程管理：推荐“一多”项目采用分层架构，明确各层逻辑。同时，介绍即时通讯应用适用的三层架构配置。
• 移动端页面和电脑端页面：遵循实际应用开发流程，以页面为基本单元，逐项讲解各页面在窗口适配、页面开发的设计思路与实现方法。

UX设计

即时通讯应用的UX设计可参考社交通讯类多设备响应式设计指南的社交通讯类章节，设计参考图如下所示。

工程管理

考虑到“一多”工程代码的复用性和可维护性，推荐开发者使用分层架构组织代码工程。分层架构将项目工程划分为产品定制层（products）、基础特性层（features）和公共能力层（common）三个层级，各层级权责明确且功能独立，为开发者提供了一套清晰、高效且可扩展的设计架构。关于分层架构的具体设计细节，可参考分层架构设计。

[h2]创建工程

建议开发者参考多设备工程部署与发布相关内容，掌握分层架构工程的创建与配置方法后，创建出模板项目工程。然后根据即时通讯应用的开发需求进行针对性修改，确保工程架构贴合实际业务需求。

[h2]工程结构

即时通讯应用根据推荐的分层架构按照products、features、common三个层级组织代码工程。每个层级的设计如下：

• products层：即时通讯应用需要适配的设备包括直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板和电脑。由于电脑设备的界面布局与其他设备差异较大，因此在products层单独创建名称为“pc”的HAP包作为电脑端的应用入口；而直板机、双折叠（Mate X系列）、三折叠、阔折叠和平板设备上的界面布局整体相似，部分差异可以通过“一多”的自适应布局和响应式布局进行适配，因此在products层创建一个名称为“default”的HAP包作为这些设备的应用入口。
• features层：即时通讯应用主要包含三个核心业务模块，分别是消息（message）、社交（social）和用户详情（user）。在features层为三个业务模块分别创建对应的HAR包，供products层按需引用。三个业务模块相对独立，互不依赖，便于后续维护与迭代。
• common层：为实现代码复用、减少冗余，在common层集中存放公共常量、路由跳转工具以及窗口管理工具等需要被多个模块共用的基础能力，供其他模块统一调用。

工程结构如下：

├──common
│  └──commonmultidevicecommunication                                     
│     └──src/main
│        ├──ets
│        │  ├──constants                      // 公共常量定义
│        │  ├──model                          // 公共model定义
│        │  ├──utils                          // 工具类
│        │  └──view                           // feature公共业务组件
│        └──resources                         // 公共资源
├──features                                   
│  ├──commonui                                // products公共业务组件模块
│  │  └──src/main
│  │     ├──ets
│  │     │  └──view                           // products公共业务组件
│  │     └──resources                         // 静态路由表资源
│  ├──message                                 // 消息模块
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──model                          // 消息模块数据模型
│  │     │  ├──view                           // 消息模块组件
│  │     │  └──viewmodel                      // 消息模块视图模型
│  │     └──resources                         // 消息模块资源
│  ├──social                                  // 社交模块
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──model                          // 社交模块数据模型
│  │     │  ├──view                           // 社交模块组件
│  │     │  └──viewmodel                      // 社交模块视图模型
│  │     └──resources                         // 社交模块资源
│  └──user                                    // 个人主页模块
│     └──src/main
│        ├──ets
│        │  ├──model                          // 个人主页模块数据模型
│        │  ├──view                           // 个人主页模块组件
│        │  └──viewmodel                      // 个人主页模块视图模型
│        └──resources                         // 个人主页模块资源
└──products                                    
  ├──default                                  // 手机/平板设备
  │  └──src/main
  │     ├──ets
  │     │  ├──entryability                    // 入口类
  │     │  ├──entrybackupability              // 应用数据备份恢复自定义拓展类
  │     │  └──pages                           // 入口页面
  │     └──resources                          // 资源文件
  └──pc                                       // PC设备
    └──src/main
       ├──ets
       │  ├──pages                           // 入口页面
       │  ├──pcability                       // 入口类
       │  └──pcbackupability                 // 应用数据备份恢复自定义拓展类
       └──resources                          // 资源文件

移动端页面

本章介绍如何针对直板机、双折叠（Mate X系列）、三折叠、阔折叠和平板设备上的即时通讯应用，使用“一多”布局能力，实现页面层级“一套代码、多端适配”的目标。同时，介绍这些设备上的窗口适配方案。

[h2]窗口适配

• 窗口模式

  适配设备支持全屏、分屏、悬浮窗和自由窗口模式，具体参见窗口模式。其中，分屏模式与悬浮窗通常无特殊设计，可通过系统方式进入。应用内监听窗口尺寸变化，通过断点刷新UI，即可自动适配全屏、分屏、悬浮窗、自由窗口模式下的布局。

• 窗口方向

  可以通过setPreferredOrientation设置窗口方向显示类型。窗口方向包含四种类型，分别是竖屏、横屏、反向竖屏和反向横屏。相关内容可参考窗口方向。在即时通讯应用中，通过module.json5配置文件，建议设置为FOLLOW_DESKTOP。

• 窗口沉浸式

  根据UX设计，需要实现不同窗口模式（全屏、分屏、悬浮窗、自由窗口）下的沉浸式效果，可参考窗口沉浸式。推荐开发者使用组件级的沉浸方案实现沉浸效果，同时需要进行动态安全区避让，确保沉浸式显示效果。自由窗口模式下使用setWindowDecorVisible设置隐藏标题栏，仅保留右上角三键。此时，应用页面拓展至标题栏区域，实现沉浸式显示效果。

[h2]消息页

即时通讯应用消息页主要用于展示消息列表、消息详情，满足用户聊天需求。根据功能设计，将消息页相关内容划分为5个区域，效果如下：

界面开发

具体介绍及实现方案如下表所示：

[h2]通讯录页

即时通讯应用通讯录页主要用于展示通讯录列表、联系人主页，满足查看联系人需求。根据功能设计，将通讯录页相关内容划分为5个区域，效果如下：

界面开发

具体介绍及实现方案如下表所示：

[h2]朋友圈页

即时通讯应用朋友圈页主要用于展示朋友圈列表，满足查看朋友动态分享的需求。根据功能设计，将朋友圈页相关内容划分为3个区域，效果如下：

界面开发

具体介绍及实现方案如下表所示：

电脑端页面

本章介绍如何基于现有移动端界面开发方案，实现布局复用，高效完成电脑设备上即时通讯应用的界面开发。

[h2]消息页

即时通讯应用消息页主要用于展示消息列表、消息详情，满足用户聊天需求。根据功能设计，将消息页相关内容划分为5个区域，效果如下：

界面开发

具体介绍及实现方案如下表所示：

[h2]通讯录页

即时通讯应用通讯录页主要用于展示通讯录列表、联系人主页，满足查看联系人需求。根据功能设计，将通讯录页相关内容划分为5个区域，效果如下：

界面开发

具体介绍及实现方案如下表所示：

[h2]朋友圈页

即时通讯应用朋友圈页主要用于展示朋友圈列表，满足查看朋友动态分享的需求。根据功能设计，将朋友圈页相关内容划分为4个区域，效果如下：

界面开发

具体介绍及实现方案如下表所示：

示例代码

• 多设备即时通讯界面