一次开发多端部署技术白皮书+V2.0

发布日期发布日期2026-06-12文档版本02(2026-06-12)版权所有◎华为终端有限公司i本材料所载内容受著作权法的保护，著作权由华为公司或其许可人拥有，但注明引用其他方的内容除外。未经华为公司或其许可人事先书面许可，任何人不得将本材料中的任何内容以任何方式进行复制、经销、翻印、播放、以超级链路连接或传送、存储于信息检索系统或者其他任何商业目的的使用。、、、华为，以上为华为公司的商标（非详尽清单），未经华为公司书面事先明示许可，任何第三方不得以任何形式使用。华为会不定期对本文档的内容进行更新。本文档仅作为使用指导，文档中的所有陈述、信息和建议不构成任何明示或暗示的担保。华为终端有限公司地址：广东省东莞市松山湖园区新城路2号网址：一次开发多端部署技术白皮书目录文档版本02(2026-06-12)版权所有©华为终端有限公司ii 1 3 43.1多设备体验设计标准 43.2响应式设计方法 184.1架构设计 4.2界面开发 204.3业务逻辑开发 534.4开发环境和工具 57 735.1自由窗口适配 735.2差异化交互体验 775.3相机体验增强 5.4悬停增强体验 836.1自动化测试 6.2云调试 6.3云测试 867.1上架流程 7.2上架配置 7.3上架审核 7.4应用分发 898.1信息显示效率体验提升 8.2高效办公体验提升 908.3大屏交互体验提升 92一次开发多端部署技术白皮书目录文档版本02(2026-06-l2)版权所有◎华为终端有限公司iii8.4金融领域交互体验提升 93 94一次开发多端部署技术白皮书1万物互联时代应用开发面临的挑战与机遇文档版本02(2026-06-12)版权所有©华为终端有限公司l 1万物互联时代应用开发面临的挑战与机遇纵观移动设备的发展历程，早期的功能机时代，移动通信设备笨重且功能单一，只能用于幕，显示效果也得到提升，支持简单的互联网接入，部以打造观影和阅读的最佳体验。这些年，手机业界始终围绕用户体验来定义从信息获取效率的角度出发，用户始终期待拥有更大的屏幕，同时又想享受随身携带的便携机这种新形态应运而生。预计未来会有更多千万量级的新增折叠机用户，这证明了能够同时满足大屏幕和便携性的设计开始赢得用户的青睐和市场。折叠机对消费者是福音，但是对开发者来说却是一种挑战，因为每个应用都要为各种折叠形态、用户握持方式、摄像头翻转、传感随着创新硬件的不断产生，折叠手机、平板电脑、个人电脑、智能座舱、越模糊，用户越来越希望这些智能终端的体验融合一致，提升设备之间的连通性、降低学习成本，真正的实现以人为中心的万物互联体验。随着HarmonyOS的出现，技术上使得融合一致体验的一次开发多端部署技术白皮书1万物互联时代应用开发面临的挑战与机遇文档版本02(2026-06-12)版权所有©华为终端有限公司2终端产品形态多样化，人均智能终端数量不断增长，全场景的用户体验诉求为开发者带来了l对于已维护多年的直板机应用，如何对体验进行重新设计，为其他未来的终端场景下，更加个性化的智能服务、更加沉浸的影音娱乐体验、更高效的智慧办为本的居家体验，多个设备间的场景化体验越来越重要，通过发挥不同形态设备的各自优势，为来全新的体验跃升，这也是操作系统之上众多应用的全万物互联之下，全场景的最佳用户体验，有助于进一步提升应用的用户粘性，吸引潜在一次开发多端部署技术白皮书2鸿蒙应用多设备开发核心技术理念文档版本02(2026-06-12)版权所有©华为终端有限公司32鸿蒙应用多设备开发核心技术理念的操作系统。由于操作系统间的差异，开发者不得不学习多套编程语言，并为不同设备的差异化体验建立多个研发团队。技术栈差异和团队间的隔阂，使得应用在不同设备上的体验出现割裂。应用内容无法跨设备复用，增加了开发者在多设备体验一致性上的投入。HarmonyOS从诞生起就旨在构建全场景多设备环境下的操作系统，是业界首个能够支持多种设备类型的操作系统。这一原生的统一操作多设备差异化体验的应用开发。应用开发者在设计之初就为全场景设备做为了达成这一目标，HarmonyOS提供了多维度统一的系统能力，简化了应用在多l统一集成开发环境：HarmonyOS提供的DevEcoStudi的开发者工具链，如工程管理、编译构建、预览调测、模拟器调测等，多端同显的预览器和模拟于多种设备的应用，无需为不同设备应用学习不同l统一SDK：HarmonyOSSDK支持全场景设备的开发，多个设备类型使用相同的SDK和Al统一交互逻辑：为了保障全场景跨设备体验一致性，统一的断点系统，开盒即用的多态组件能力，开发者无需感知屏幕尺寸，最大化复用界面功能和l统一工程和统一维护：开发者在同一个工程内处理应维护独立的代码工程，无需构建多套编译构建和发布的任务链，l统一上架和分发：开发者通过统一流程构建的应用安除了这些统一的系统能力，HarmonyOS开发者社区还提供了面向多设备实践，以及场景化的开发最佳实践等，加速开发者掌握HarmonyOS应用开发技能。通支持，开发者能够更快地积累经验，轻松应对各种设备类型、不同屏幕尺寸、折叠开合状态以及一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有©华为终端有限公司43多设备应用体验设计随着终端设备形态日益多样化，应用设计需要考虑界面布局协调性与设能与不同的屏幕尺寸之间的先后关系。为了保持多设备体验的连续性，HarmonyOS在设计之初就面场景、全设备进行定义。要保留应用体验带给用户的熟悉感，也要兼顾在不同设备、产品类型上的最佳体验。HarmonyOS在系统底层设计上兼顾了不同设备之间的差异化，保证基础交互归一、高端视效在不同窗口大小或设备屏幕的适配过程中，我们提炼了如下的体验标准，应用在适配过程中遵循以下标3.1.1系统基础体验标准基础交互应用导航：所有界面都可以执行系统返回操作。应用除一级界面外，所有全屏界面均需要提供返回/关闭/交互手势：应用使用的手势应避免与系统手势冲突。不要设计可能跟系统手势冲突的手势边缘手势、指关节手势、三指及以上的手势。应用使用的典型手势设计需满足相关参数约束：长按手势的接触时长应为500ms，时长在400ms-650ms之间可调。双击手势的间隔时长应为70ms-400一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司5点击热区：手机/平板/折叠屏设备点击热区需满足最小尺寸要求，主要交互元素或控件的可点击热区至少互热区不小于7mm；智慧屏适配指向遥控器，光标指向交互热区至少为4cm(推荐)，不得小于(必须)；智能穿戴设备点击热区需满足最小尺寸要求，主要交互元素或控件的可点击热区至少为46vp×多窗适配：应用需要适配竖向悬浮窗、左右分屏、上下分屏，且确保该形态成全流程交互。例如上下分屏时，不出现弹出框过大无法点击关闭按钮，导致交互中止等问题内容显示过大导致交互效率低浏览体验差等问题。视频、游戏类应用需要适配横向悬浮窗。应基础布局导航条适配：手机、折叠屏、平板等设备屏幕底部有导航条，应用需对底部导状态栏适配：应用需要对状态栏进行适配显示。采用沉浸一体化的背景设计，保证效果的整体挖孔区域，若重要信息或交互操作和挖孔区之间有遮挡，则需要局部避开挖孔区显示。若应用支持横竖屏旋转，则横竖屏的界面布局均需满足以上挖孔适配要求。在折叠设备上可根据场景适配折痕区域，重布局完整：设备在折叠/展开或横竖屏切换时，应用窗口内的组件、图片、视频等响应式设计：避免使用固定像素来作为界面布局或元素尺寸的定义，对于增加Blank等组件来实现动态伸缩。配合媒体查询、宽度及高度断点来进行动态判断，基础视觉深色模式适配：应用需支持深色模式显示，确保系统切换到深色模式后，界面以深色风格呈现，并一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有©华为终端有限公司6色彩对比度：应用使用的色彩需满足最小对比度要求：图标或标题文字与背景对比度大于3:与背景对比度范围：11:1~15.1:1智能穿戴深色背景下，11pt及以下的小字号对比度不小于8:1，11pt3.1.2多设备增值体验标准折叠机基础体验开合连续性：应用在设备折叠/展开后不应出现操作步骤增加，操作更复杂等体验下降的情况。例如：页面切换到其他页面、页面滚动位置发生偏移、输入内容丢失、图片模糊、播放进度变悬停适配：长视频、短视频、直播、通话、会议、拍摄类应用需针对折叠屏的悬停态进行单界面布局设计时充分考虑悬停态下不同屏幕区域的可视角度及交互难易度。下半屏区域内可放置作，上半屏区域内进行信息显示，呈现浏览型内容。交互型控件，例如弹出框、半模态，在下半一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司7折痕避让：悬停态时，中间弯折区域难以操作且显示内容会变形。长议、拍摄类应用需针对折痕区域进行避让适配。上半屏内容由中线容由中线向下避让40vp(7毫米)。横竖屏适配：应用支持在折叠屏展开态、平板设备上的横竖屏切换显示。屏幕比例阔折叠增值体验阔折叠屏幕比直板机宽度更宽、高度更矮，在信息显示效率多列布局：阔折叠相比正常直板机在屏幕宽度上要更宽，因此在界面布局上势。针对列表、宫格类布局可以显示更多的列数。列表类布局：W≥9003列、W≥12004列、W≥15005列；宫格类布局：W≥4403列、W≥6004列、W≥7605列、W≥9206多行聚类布局：阔折叠相比正常直板机在屏幕高度上要更矮，因此为了增加件从原来的纵向布局调整为横布局，依次来减少组件显示面积的占用，把更多的显示空间让给有效的信息内容。例如：底部tab导航，可以将图标和标题栏从上下布局调整为左右布局，减少底部tab导航的高度；搜索框和标题栏可以从两行显示调整为单行显示。通过这些方案可以极大程度减少组件的空间占一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司8图片高度约束：通常应用内的图片在阔折叠上都直3.1.3业务场景增值体验标准效率型布局：效率型应用，例如文件管理、一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有©华为终端有限公司9浏览型布局：浏览型应用或页面，例如应用市场的首页、视频应用的首页多设备断点系统当显示环境发生变化时，如横竖屏切换、调节字体大小、应用分屏等，都需要及时调整内容的布局方式进行适应变化。开发者可以通过调用断点系统、栅格系统、响应式布局和媒体查询等判断逻辑，根据界面具体的展示内容进行更合理的变化，根据内容的优先级、最佳比例和响应式规格进行适配。断点是以应用窗口宽度为参照，将宽度和高度这两个维度拆分成了不同的区间下，可根据设计方案实现不同的页多设备交互归一为了让应用在全场景设备上都能获得一致自然的交互体验，设计时需要为不同交互状态下的备设计适合的交互方式。在传统的开发模式中需要为不同的输入设备进行适配开发，工作量巨大。可交备上运行或在单一设备上被用户通过多种输入方式操控，这需要用户界面能够自动识别和支持不同的输一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司10针对这一问题，HarmonyOS提出了交互事件归一思想，旨在保证全场景下应用交互体验一致时，降低设计和开发的工作量。交互事件归一是一种适配多设备输入的交互的交互行为转化为同一个交互事件，保证控件在不同交互的交互事件接口，无需为每个输入设备单独适配，从而简化以手势交互为例，当应用运行在触屏设备上手指/手写笔等直接交互、鼠标/触摸板/键盘/表冠/遥控器/车机摇杆/旋钮/手柄/隔空手势等间接交互、以及语音交互。HarmonyOS提炼、总结这些一多交互能力及规格，并将其沉淀下去。基于设备差异展现最佳体验设计一直是HamronyOS设计的核心初衷。不同设备场景下的要协调界面本身的自适应规则，并结合设备硬件屏幕展示空间的约束共同定义。横向与纵向断点的只是一种处理方式，应用自身需要避免硬编码的处理方式，减少硬编码带来的各种截断、操作不便根据使用场景，提供了以下8种不同的布局方法，在面向多端应用设计过程一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司111.等比缩放：容器组件尺寸发生变化时，增加或2.占比缩放：子组件的宽高自适应缩放适用于图片、圆形按钮、banner、反应真实物体形状的图像等一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司121.自适应延伸：容器组件内的子2.自适应隐藏：容器组件内的子需要判断因隐藏而不展示的内容对功能完整性是否有影响，并考虑通过一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司13一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司14一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司15以启动页为例，布局会在多个窗口尺寸、组接下来根据设备布局差异，在断点网格中匹配对应的响应式规则。上下结构的启动页使用一套布局进行适配，在极端的窗口比例下，可以选择隐藏部分元素或缩小所占比例来达到布局的平衡。一次开发多端部署技术白皮书3多设备应用体验设计文档版本02(2026-06-12)版权所有◎华为终端有限公司16除此以外，ArkUI组件也是基于全场景设备进行设计，通过对使用环境和设备差异性的考量，既保证了组件能力的统一性，又在不同设备的表现层面呈现了更加贴合设备本身的设计。在电脑产品上，ArkUI重点优化了键鼠及触控板带来的体验交互差异，穿戴产品由于圆形手表形态的限制，为了更好的贴合硬多端适配的首要问题是界面布局发生变化时的响应规则，常规的界面操作类过改变硬件设备的宽度和高度数据，结合内外开合的物理特性，实现了丰富多样的产品可玩HarmonyOS产品阵营中，除了传统的竖屏手机、折叠屏、平板等类型外，我们迎来阔折叠的出现丰富了产品本身的功能性和趣味性，同时也带来了界面布局上的新挑战，例如：针对从内屏切换到外屏时，除展示功能区域变小外，还需要做很多增量的组件层、功能层的调整的文本、图标、布局信息结构均与内屏保持一致。由于小屏空间极其有限，可以考虑隐藏信号在组件能力上，ArkUI也提供了针对较小场景的组件样式以供选择，例如标题栏选择使用单行的样式，搜索框组件隐藏到标题栏按钮中，索引条组件使用缩略模式，弹出框组件需要按照比例生效最大高度和文档版本02(2026-06-12)版权所有◎华为终端有限公司17一多布局的适配随着业务界面复杂度不同，在处理方式上也有差异化，但无论如何，随着一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-12)版权所有◎华为终端有限公司184多设备应用开发4.1架构设计多设备场景的技术架构可在单设备应用架构的基础上叠加，开发者需要重点有特性的代码管理。为便于模块管理和清晰查看模块间的依赖关系，推荐采用common、features、products三层工程结构。lcommon（公共能力层存放公共基础能力，包括通用的UI组件、数据管理等。多products和features中的模块依赖，不可以反向依赖特性和产品层。lfeatures（基础特性层存放基础特性模块，一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-12)版权所有◎华为终端有限公司19个product的EntryHAP使用。需要单独部署的feature通常编译为Feature类型的HAP包，和products下Entry类型的HAP包进行组合部署。features层可以横向调用及依赖common层，不可以反向依赖products层。lproduct（产品定制层不同设备形态的product按需集成了本设备所需的特性，并进行产品化的定制。各个product各自编译为一个Entry类型的HAP包，作为应用的主入口。product层向下依赖features层和common层，各product间不可相互依赖。default类型的product是多个类型的设备公用的，如应用的部分界面在手机和平板上的UX设计相似，可共用default。其HAP包需同时配置phone和tablet设备类型。#基础特性目录#登录模块#设置模块#产品定制目录#手机版本目录/application││L──product文档版本02(2026-06-12)版权所有◎华为终端有限公司20#平板版本目录依据多设备应用的UX设计理念和方法，4.2.1布局布局能力涵盖基础的自适应布局和进阶的响应式布局。使用自适应布局可以应对各种屏幕变化，但尺寸屏幕上，结合响应式布局能力，可以更有效地利用大尺寸屏幕优势，为用户提供更加场景化的优质力力力力组件指定layoutWeight，系统力组件指定aspect-ratio宽高比力力组件设置displayPriority后系统藏一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-12)版权所有◎华为终端有限公司21力力响应式布局合理使用自适应布局进行页面开发后，无论窗口尺寸如何变化，界面布局都会自动适应窗口展示然而，随着窗口尺寸大幅增加后，原有的手机页面内容在大尺寸窗口上会出现图片异常放大、页面内容稀疏以及留白过多等问题，影响用户体验。因此，开发者需要针对不同的窗口尺寸以及设备的使用场景，进行适当的增量设计和开发，以提供更贴近用户场景的应用使用体验。这需要运用到响应式布局是指页面内的元素可以根据特定的特征（如窗口宽度、窗口宽以适应外部容器变化的布局能力。响应式布局能力包括三个部分：断点、断点是响应式布局的核心工具。HarmonyOS提供了断点查询API，getWindowWidthBreakpoint()用于查询横向断点区间，可获取XSmall、Small、Medium、Large和XLarge5个屏幕宽getWindowHeightBreakpoint()用于查询纵向断点区间，可获取Small、Medium、Large3个区间代表屏幕宽高比例。基于横向和纵向的断点划分，开发屏幕尺寸变化、横竖屏切换、应用分屏、自由多窗等场景提供独特的应用使用体验。关于断点媒体查询是多设备开发的另一个关键工具，支持查询屏幕分辨率、横竖屏、深浅色模式等与用户界面相关的要素，允许开发者在这些场景变化时进行布局差异化开发，以满足不同场景下的界面精求。值得注意的是，当前媒体查询还提供了设备类型的查询能力，建议开发者尽量避免使用此功页面布局管理，以确保页面布局在各种设备间最大化复用。关于媒体查询的更多信息，栅格布局是用于处理多屏幕尺寸下动态布局的能力，适用于规律性的页面布局场景，其核心思想是面划分为等宽的列数，便于对页面元素进行定位和排版。栅格布局集成了断点自定义能力，支持为参照物定义断点区间，同时也支持以自身为参考进行组件级别的断点自定义，使用场景更加灵容器断点组件是基于组件自身实际尺寸和断点阈值数组确定断点值，通过双向绑定实时返回断点信息，用于响应式布局。与窗口断点不同，容器断点关注的是组件所在容器窗口的尺寸。关于容器断点组件的更多信息，可在使用web组件时，需要考虑W3C标准的响应式布局规格，用媒体查询@media对页面整体结构布局，用容器@container查询来对组件布局进行调整。Web的响应式布局规格允为了取得混合页面的最佳显示效果，可以考虑将web的尺寸断点对齐ArkUI面需要考虑横屏及竖屏的UX设计，单纯地使用vw、vh等单位进行布局文档版本02(2026-06-12)版权所有©华为终端有限公司224.2.2组件ArkUI提供了一系列基础UI组件和在多设备环境下具备多态能力的高级组件，助力开基础组件ArkUI提供了多种维度和用途的基础组件能力，用于常规界面功能实现，如按钮、文本框、弹窗等基础表4-2ArkUI基础组件GridRow、GridCol、SideBarContainer等List、ListItem、ListItemGroup、Grid等Indicator、Navigation、NavDestination等Button、Toggle、Checkbox等Text、TextArea、TextInput、RichEditor等Image、ImageAnimator、VideoAlphabetIndexer、Badge、Chip等Blank、DividerCanvas、ImageBitmap、ImageData、Matrix2D、Circle、Ellipse、Line、Polyline、Polygon、Path、RXComponent、Component3D、EmbeddedComponentToolbar、TabTitleBar等Menu、MenuItem、MenuItemGroup、ContextMenuDialog、ActionSheet、CustomDialog等FormLink、FormMenuWithTheme了解所有ArkUI组件能力，请查阅ArkUI官方文档。一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-12)版权所有◎华为终端有限公司多态组件为提升应用在多设备开发过程的开发效率，HarmonyO的多态组件能力。通过扩展ArkUI基础组件，这一能力提供了符合多设备设计规范的高阶精致多态组件，帮助开发者在多设备开发中实现一致性和个性化的平衡，同时降低维护成本，提升用户体验。840vp时，形态为悬浮式展开；屏幕尺寸>840vp，形态为嵌入式展开。/Pad/PC/智慧屏/座舱HdsNavigation应窗口大小的多态能力，支持标题栏动态模糊样式。当应用开发者需要使用标题栏样式随内容区滚动而动态改变样式的导航组件时，可以通过设置titleBar属性中的标题栏样式配置，/Pad/PC/智慧屏/座舱类HdsListitemCard/Pad/PC/智慧屏/座舱/穿戴类HdsActionBar/Pad/PC/智慧屏/座舱/Pad/PC/智慧屏/座舱API20以后支持：UIDesignKit官方文档，组件库持续构建中UIDesignKit提供丰富的扩展能力，允许开验。可通过以下import方式按需加载相应的组件。 import{hdsSideBar,HdsNavigation,HdsTabs}from'@kit.UIDesignKit';以导航类组件为例，HdsSidebar和HdsNavigation组件作为核心模块，不仅延续了ArkUI基础导航HdsNavigation组件的协同工作。通过示例代码和实际效果展示，开发者将了解如何在不同断点下实现单栏、双栏或三分栏的布局效果，以及如何在不同设备上实现差异化样式设计。此外，我们还一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-12)版权所有◎华为终端有限公司24HdsNavigation组件在不同设备上的独特交互体验，如标题栏的自动显隐功以及HdsNavigation与HdsSidebar组件在不同设备的差异化交互设计。−断点及UX设计内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。在默认规格下，开发者在不设 一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-l2)版权所有◎华为终端有限公司25样式更加体现商务感。PC场景支持扩展到窗感、空间感等高阶体验。当应用开发者需要使用标题栏样式随内容区滚动而动态改变样式的导一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-l2)版权所有©华为终端有限公司26件时，可以通过设置titleBar属性中的标题栏样式配置，自定义滚动前后的标题栏样式。用模糊、过渡模糊、渐变模糊样式设置。默认为通用 为在各种屏幕尺寸下更多展示内容，能获得更加沉浸的体验，HdsNavigation支持设隐。当应用开发者需要滚动内容区从而动态隐藏标题栏时，可以通过配置dy使用该功能。设置隐藏标题栏区域时，可以同时设置隐藏状态栏。该能力同时支持标题栏隐 hideTitleArea:true, mode:HideMode.SCROLL_UP_TO, 组件还提供多种开箱即用的按钮样式，支持文字按钮、头像、图标等多种操作体验。同义区域，提供标题栏底部自定义区域，悬浮自定义区域，满足个性化设计需求。当应用开发者需要在标题栏区域增加自定义节点时，例如在标题栏上方区域增加分段按钮，标题栏底部区域增加搜索 一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-l2)版权所有◎华为终端有限公司27一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-l2)版权所有◎华为终端有限公司28对应屏幕断点下默认呈现双栏形态，此时可以实现三分栏效果，开发者可以通过事件回调，对}4.2.3交互如通过触摸屏、鼠标、触控板等与设备互动。为了减少因不同交互方式单独开发而增加HarmonyOS提供了统一各种交互方式的高表4-3交互归一的设备与事件悬浮(onHover)上幕单指轻点/单指键幕双击(TapGesture)轻点两下/按压幕(ContentMenu)双指轻点/按压键拖拽(Drag)一次开发多端部署技术白皮书4多设备应用开发文档版本02(2026-06-12)版权所有©华为终端有限公司29(SwipeGesture)轮或shift开(RotationGesture)在上述基础的归一化交互事件之下，HarmonyOS仍保留了原始的触摸屏、鼠标、键盘按键事件，支持开发者进行场景化快捷键的定制开发，例如，使用空格键事件实现音视频场景的播放和暂停控制4.2.4典型的多屏幕开发场景启动页启动页是应用冷启动时最先显示的页面，在应用进程尚未运行或应用内容未完全加载前，动页，有助于提升用户在应用启动阶段的等待体验。启动页的配置方式有简易启动页和增强启动种。开发者通过在module.json5配置文件中的abilities标签配置启动页资源。简易启动页方案仅支持配置startWindowIcon和startWindowBackground字段，需要开发者针对不同屏幕大小综合考虑并设计和配置相应的资源，往往无法应对屏幕尺寸多变场景，我们建议开发者使用增强启动页方案进行启动页配置。增强方案可用于元素更复杂的启动页配置。同时，相应资源也能够具备根据窗口尺寸1.在创建的UIAbility模板中，上述startWindow字段未配置，开发者可以新增startWindow字段指向二级配置json文件，以启用启动页增强配置。其中，json文件需要由开发者自行创建并放置到工程目录下。推荐的文件名及路径为resources/base/profile/start_window.json。2.配置二级json文件的具体字段，包括背景颜色、插画资源、品牌标识、背景图片和图片填充方式， { "startWindowIllustration":"$media:illustration",//启动页插画资源 "startWindowBrandingImage":"$media:branding",//启动页品牌标识 "startWindowBackgroundColor":"$color:start_window_background",//启动页背景色 "startWindowBackgroundImage":"$media:startingWindowBackground",//启动页背景图片 "startWindowBackgroundImageFit":"Cover"//背景图片在窗口内的填充方式 }文档版本02(2026-06-12)版权所有◎华为终端有限公司30最终在各种屏幕尺寸的效果如下（自左向右分别对应：手机、手机应用分屏、大折叠展开态完成上述启动页配置后，即可支持在多种屏幕尺寸下自适应展示。对于进阶场景，如深色模式resources/dark目录下进行配置。其他设备场景如座舱、平板，可以创建car、tablet目录横竖屏旋转HarmonyOS手机因其多样化的形态和用户使用场要确保横竖屏体验一致；而三折叠（XT）在展开后接近平板，用户也议在应用启动时或进入特定页面时，避免强制设定屏幕方向为竖屏，这可能会给用户带来不好的HarmonyOS通过对全场景设备进行了横屏使用的人因分析，得出的结论是大于348vp时可以获得较好的横屏阅读体验。因此，建议开发者在满足此条件后支持应用横屏使用，并横竖屏控制行为在应用内是统一的，因此只需要对横竖屏响应进行一次性实现和控制，业务页面内就不//设置默认的横竖屏策略 setDefaultOrientation():void{ letwindowRect:window.Rect=this.windowObj!.getWindowProperties().windowRect; letwindowWidthVp:number=this.uiContext!.px2vp(windowRect.width); letwindowHeightVp:number=this.uiContext!.px2vp(windowRect.height); //满足屏幕短边大于348vp时允许横屏 if(Math.min(windowWidthVp,windowHeightVp)>348){ this.windowObj?.setPreferredOrientation( } this.windowObj?.setPreferredOrientation(window.Orientation.PORTRAIT); }}}下一步，在窗口创建阶段调用横竖屏控制处理。由于三折叠设备由折叠收起状态进onWindowStageCreate(windowStage:window.WindowStage):void{ //Mainwindowiscreated,setmainpageforthisability windowStage.getMainWindow().then((windowObj)=>{ this.windowObj=windowObj; }); windowStage.loadContent('pages/Index',(err)=>{文档版本02(2026-06-12)版权所有◎华为终端有限公司31thisthis.uiContext=this.windowObj!.getUIContext();//启动阶段设置横竖屏控制this.setDefaultOrientation();this.windowObj!.on('windowSizeChange',this.onWindowSizeChange);});}}信息流下图是在移动应用中经常可以看到的信息流页面，开发者可通过对设计图中的布局经过仔细观察和分析，我们发现三套设计稿存在以下l整体页面由Tab导航、菜单功能区、搜索功能、Ban文档版本02(2026-06-12)版权所有◎华为终端有限公司32下面我们先基于页面共性来搭建主体线框代码架构，并按照上述共性和线性变化部//Flex设置wrap属性为换行后，当容器横 Flex({wrap:FlexWrap.Wrap}){ //二级菜单导航 MenuBar() //搜索功能区 }}需要注意，在进行搜索框部分的代码实现时，部分开发者会基于设计稿进行断点和固定v//XSmall和Small断点时宽度为280vp，Medium、Large、XLarge时宽度为240vpTextInput({placeholder:'搜索...'}) .width(newWidthBreakpointType(280,280,240,240,240).getValue(this.currentWidthBreakpoint)) .layoutWeight(1)文档版本02(2026-06-12)版权所有◎华为终端有限公司33ButtonButton(){Image($r('app.media.search_history')).width('100%').height('100%').fillColor(Color.White))}}}配置：首先将barPosition设置为BarPosition.Start，其次将vertical设置为true。 barPosition:this.currentWidthBreakpoint===WidthBreakpoint.WIDTH_LG?BarPosition.Start:BarPosition.End}).vertical(this.currentWidthBreakpoint===WidthBreakpoint.WIDTH_LG)点规格在Large之上还有更大的XLarge，为了保持Tab在XLarge屏幕上仍然在左侧显示，上面的代码 barPosition:[WidthBreakpoint.WIDTH_LG,WidthBreakpoint.WIDTH_XL].includes(this.currentWidthBreakpoint)? BarPosition.Start: BarPosition.End }) .vertical([WidthBreakpoint.WIDTH_LG,WidthBreakpoint.WIDTH_XL].includes(this.currentWidthBreakpoint))Banner图区域是应用非常重要的区域，Swiper轮播图组件进行实现。考虑到屏幕尺寸变化场景，开发者需要注意不要因为头图占用区域过大导致整体页面布局不协调。针对这种场景，有两种常用的设计和实现方式：//定义轮播图在不同屏幕断点下的资源地址 privatebannerImgList:Array<BannerImg>=[ ]; build(){ Swiper(){