文档中心
一多开发实例（购物比价）概述
本文从目前流行的垂类市场中，选择购物行业应用作为典型案例详细介绍“一多”在实际开发中的应用。购物行业应用的核心功能为浏览商品、商品比价和直播购等。根据这些核心功能，本文选择首页、商品分类页、商品详情页、商品支付页、咨询客服页、直播间页等作为典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现购物比价应用的相关功能。
购物类应用为了向用户展示更多的商品选择，对垂类内的核心功能进行了独特设计：
商品分类页主要用于快速查找目标商品，采用分栏的布局提升查找效率。商品支付页，为避免大面积页面跳转和遮挡商品的关键信息，采用浅层窗口-半模态的方式进行支付。 在查看商品详情或直播时，通过侧边面板显示其他的辅助信息，增加浏览效率。直播间页推荐的商品信息，在多端基于设备屏幕尺寸进行响应式适配，避让直播的关键信息。退出直播间页时，能够使用画中画小窗口观看直播。当前系统的产品形态主要有手机、折叠屏、平板和2in1四种，下文的具体实践也将围绕这几种产品形态展开，同时将分别从UX设计、架构设计、页面开发三个角度给出符合“一多”的参考样例，介绍“一多”购物比价应用在开发过程中的最佳实践。
UX设计章节介绍购物比价应用的交互逻辑和通用的设计要点，对于类似的设计要点，开发者可以直接拿来使用。架构设计章节推荐“一多”应用使用目录结构更加清晰的三层架构。页面开发章节会将页面划分为不同区域，按照区域的开发顺序，介绍如何使用自适应布局和响应式布局实现不同的UI效果。说明
阅读本文前，读者需熟悉方舟开发框架（ArkUI框架）和页面开发的“一多”能力。下文将详细介绍它们在“一多”开发实践中如何使用。
UX设计
电商购物类的多设备响应式设计指南，点击访问。
架构设计
HarmonyOS的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。更多详细请参考指南分层架构设计的逻辑设计。
页面开发
本章介绍购物比价应用中如何使用“一多”的布局能力，完成页面层级的一套页面、多端适配。下文将从不同页面展开，介绍每个页面区域使用到具体的布局能力，帮助开发者从0到1进行购物比价应用的开发。
首页首页通常有入口图标和商品卡片等丰富的商品信息，帮助解决用户浏览及挑选商品的核心需求。观察首页在不同设备上的UX设计图，可以进行如下设计：
将首页划分为7个区域，效果图如下： 首页区域2在小设备上呈两行显示，在中设备和大设备上单行显示，断点变化时切换显示效果。首页区域3使用自适应布局延伸能力随不同设备尺寸延伸或隐藏，区域4、5使用自适应布局占比能力和均分能力。首页区域1、5-8使用响应式布局中的栅格断点系统，根据断点变化改变组件内属性，从而实现相应的布局效果。 商品分类页商品分类页主要用于快速查找目标商品。观察商品分类页在不同设备上的UX设计图，可以进行如下设计：
将商品分类页划分为4个区域，效果图如下：商品分类页的4个基础区域介绍及实现方案如下表所示：
区域编号
简介
实现方案
1
顶部搜索框
在sm断点下占满行宽，在md、lg断点下设置justifyContent属性为End。
2
侧边导航
Navigation组件实现，设置mode属性为Split分栏显示，使用navBarWidthRange约束不同断点下的固定导航栏宽度。
3
广告卡片
Swiper组件设置display在不同断点下为1、2、3，在md断点下设置nextMargin露出后边距，实现自适应布局的占比能力，代码可参考一多开发实例（长视频）。
4
商品小图
使用List组件+栅格布局实现每行显示固定个数的商品图，代码可参考一多开发实例（长视频）。
