【鸿蒙实战开发】一多开发实例（便捷生活）

往期推文全新看点

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

概述

本文从目前流行的垂类市场中，选择便捷生活类应用作为典型案例详细介绍“一多”在实际开发中的应用。一多便捷生活应用包含首页展示、商品展示、图文详情、视频浏览等功能。根据这些核心功能，本文选择美食列表页、店铺页、商品详情页、图文详情页、视频页等作为典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现便捷生活应用的相关功能。

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

• 店铺页，多端适配不同形态的弹窗用以进行商品规格的选择，贴合用户交互习惯。
• 商品详情页，使用滑动伸缩的方式展示商品图，突出商品样式，解决多端大图展示问题。
• 图文详情页，以多种形式实现“一多”布局并加入图片放大和沉浸式浏览的交互设计，让用户有更好的浏览体验。
• 视频详情页，通过模糊显示直播背景，让页面主题统一，实现沉浸式观看。

页面开发

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

布局能力

本节由不同页面展开，介绍每个页面区域使用到的具体布局能力，帮助开发者从零到一进行便捷生活应用的开发。

首页

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

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

示意图	sm	md	lg
首页

• 首页的5个基础区域介绍及实现方案如下表所示：

编号	简介	实现方案
1	顶部功能区	使用 拉伸能力 结合断点控制元素尺寸，在lg断点采用 Blank组件 填充中间空白区域。
2	菜单列表	使用 网格容器 ，借助栅格组件能力监听断点变化改变列数，设置aspectRatio属性实现缩放能力。
3	秒杀列表	List组件 实现延伸能力。
4	商品列表	使用 WaterFlow 容器，实现一列到多列的切换。在sm断点下依赖断点控制设置WaterFlow的columsTemplate属性为2，在md断点下设置columsTemplate为3，在lg断点下设置columsTemplate为4。
5	菜单导航栏	借助 栅格布局 监听断点变化改变位置。

美食列表

美食列表页显示推荐美食，在大屏上增多列数的布局以增加用户信息量获取。观察美食列表页在不同设备上的UX设计图，可以进行如下设计：

• 美食列表页的3个基础区域介绍及实现方案如下表所示：

编号	简介	实现方案
1	顶部功能区	使用 拉伸能力 结合断点控制元素尺寸，在lg断点采用 Blank组件 填充中间空白区域。
2	菜单列表	List组件实现延伸能力。
3	美食列表	响应式布局的 栅格布局 ，设置aspectRatio属性实现缩放能力。

店铺页

店铺页展示店铺信息和其所售卖的所有商品，可以在侧边栏查看并且快速切换，用户也可以选择商品规格，在不同产品中弹窗以不同形态显示，贴合操作习惯。观察店铺页在不同设备上的UX设计图，可以进行如下设计：

• 将店铺页划分为4个区域，效果图如下：

示意图	sm	md	lg
店铺页
店铺页-侧边栏
店铺页-选规格

店铺页的4个基础区域介绍及实现方案如下表所示：

编号	简介	实现方案
1	店铺信息展示区	在父元素上使用 Flex组件 实现挪移布局和visibility属性实现样式切换。
2	菜单列表