【鸿蒙实战开发】一多开发实例（旅行订票）

最新推荐文章于 2025-05-29 09:57:15 发布

原创

最新推荐文章于 2025-05-29 09:57:15 发布 · 811 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙开发 #缓存 #移动开发 #ArkUI #一次开发多端部署

往期推文全新看点

概述

本文从目前流行的垂类市场中，选择旅行订票垂类作为典型案例详细介绍 “一多” 在实际开发中的应用。本文选择首页、时间选择页、查询车票页、填写购票信息页、提交订单页等11个典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现地图导航应用的相关功能。

旅行订票应用对垂类内的核心功能进行了独特设计：

首页支持沉浸式浏览，将整个界面设置背景图，同时设置全屏显示，使用户阅读时有更加沉浸的体验。
时间选择及低价日历页根据设备不同有更好的体验效果，手机支持页面跳转，其他大屏设备支持日历弹窗。
查询车票支持对车票的筛选功能，方便用户对车票的筛选。
查询车票上滑的沉浸式浏览，将日期筛选等信息隐藏，方便用户获取更多信息。
酒店详情页支持顶部banner根据设备不同有不同的展示效果，使用户在不同设备上有更好的体验。

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

UX设计章节介绍旅行订票应用的交互逻辑和通用的设计要点，对于类似的设计要点，开发者可以直接拿来使用。
架构设计章节推荐“一多”应用使用目录结构更清晰的三层架构。
页面开发章节会将页面划分为不同区域，按照区域的开发顺序，介绍如何使用自适应布局和响应式布局实现不同的UI效果。

架构设计

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

页面开发

本章介绍旅行订票应用中如何使用”一多”的布局能力，完成页面层级的一套代码、多端适配。下文将从不同页面展开，介绍每个页面区域使用到具体的布局能力，帮助开发者从零到一进行旅行订票应用的开发。

首页

旅行订票应用首页主要发挥提供买票窗口的作用，解决用户订票以及预约酒店需求，所以首页内容都围绕这一功能设计。

将首页划分为6个部分：效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	底部/侧边栏	借助栅格布局监听断点变化改变位置。
2	顶部控件	Select组件和 TextInput组件中间增加 Blank组件，实现拉伸能力。
3	火车票选择	使用Tabs组件实现拉伸能力。
4	功能入口	使用 Swiper组件，设置在不同断点下的displayCount属性来实现自适应布局的延伸能力。
5	热门资讯	利用响应式布局的栅格布局，结合 Stack组件和 Grid组件，设置aspectRatio属性实现缩放能力。
6	酒店预订	利用响应式布局的栅格布局，结合Stack组件和Grid组件，设置aspectRatio属性实现缩放能力。