【鸿蒙实战开发】一多开发实例（购物比价）

往期推文全新看点

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
• 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
• 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

概述

本文从目前流行的垂类市场中，选择购物行业应用作为典型案例详细介绍 “一多” 在实际开发中的应用。购物行业应用的核心功能为浏览商品、商品比价和直播购等。根据这些核心功能，本文选择首页、商品分类页、商品详情页、商品支付页、咨询客服页、直播间页等作为典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现购物比价应用的相关功能。

购物类应用为了向用户展示更多的商品选择，对垂类内的核心功能进行了独特设计：

• 商品分类页 主要用于快速查找目标商品，采用分栏的布局提升查找效率。

• 商品支付页，为避免大面积页面跳转和遮挡商品的关键信息，采用浅层窗口-半模态的方式进行支付。

• 在查看 商品详情 或 直播 时，通过侧边面板显示其他的辅助信息，增加浏览效率。

• 直播间页 推荐的商品信息，在多端基于设备屏幕尺寸进行响应式适配，避让直播的关键信息。

• 退出直播间页时，能够使用画中画小窗口观看直播。

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

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

架构设计

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

页面开发

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

首页

首页通常有入口图标和商品卡片等丰富的商品信息，帮助解决用户浏览及挑选商品的核心需求。观察首页在不同设备上的UX设计图，可以进行如下设计：

• 将首页划分为7个区域，效果图如下：

	sm	md	lg
效果图
sm

• 首页区域2在小设备上呈两行显示，在中设备和大设备上单行显示，断点变化时切换显示效果。
• 首页区域3使用自适应布局延伸能力随不同设备尺寸延伸或隐藏，区域4、5使用自适应布局占比能力和均分能力。
• 首页区域1、5-8使用响应式布局中的栅格断点系统，根据断点变化改变组件内属性，从而实现相应的布局效果。

区域编号	简介	实现方案
1	底部/侧边页签	借助 栅格布局 监听断点变化改变位置，代码可参考 一多开发实例（长视频）。
2	顶部页签及搜索框	栅格布局监听断点变化实现折行显示，List组件 实现延伸能力，layoutWeight实现拉伸能力，代码可参考 一多开发实例（长视频）
3	商品分类图标	List组件实现延伸能力，代码可参考 一多开发实例（长视频）。
4	商品卡片	Swiper组件，指定displayCount属性实现占比能力，设置aspectRatio属性实现缩放能力，代码可参考 一多开发实例（长视频）。
5	福利专区	Row组件 的justifyContent属性设置为FlexAlign.SpaceBetween实现均分能力，代码可参考 一多开发实例（长视频）
6	甄选推荐	响应式布局的栅格布局，设置aspectRatio属性实现缩放能力，代码可参考 一多开发实例（长视频）
7	限时秒杀	响应式布局的栅格布局，设置aspectRatio属性实现缩放能力，同甄选推荐。

商品分类页

商品分类页主要用于快速查找目标商品。观察商品分类页在不同设备上的UX设计图，可以进行如下设计：

• 将商品分类页划分为4个区域，效果图如下：

	sm	md	lg