鸿蒙开发next【购物比价】一多开发实例

本文链接：https://blog.csdn.net/ADgai1987/article/details/142211355

一多开发实例（购物比价）概述

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

UX设计

电商购物类的多设备响应式设计指南

架构设计

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

页面开发

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

首页

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

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

sm

md

lg

效果图

效果图
首页区域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属性实现缩放能力，同甄选推荐。