一次开发，多端部署-购物应用-HarmonyOS NEXT-Codelabs-华为开发者联盟

一次开发，多端部署-购物应用

Codelabs HarmonyOS NEXT

1 介绍

本篇Codelab基于自适应布局和响应式布局，实现购物应用在手机、折叠屏、平板等不同屏幕尺寸设备上按不同设计显示。

通过common、features、product三层工程结构，实现一次开发，多端部署。手机运行效果如图所示：

折叠屏运行效果图：

平板运行效果图：

相关概念

一次开发，多端部署：指一套代码工程，一次开发上架，多端按需部署，目标是支撑开发者高效地开发支持多种终端设备形态的应用。
自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。
响应式布局：当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。
GridRow：栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。
GridCol：栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用。

完整示例

源码下载

MultiShopping.zip

2 环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求

DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。

硬件要求

设备类型：华为手机。
HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。

环境搭建

安装DevEco Studio，详情请参考下载和安装软件。
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考配置开发环境。
开发者可以参考以下链接，完成设备调试的相关配置：
- 使用真机进行调试

3 代码结构解读

本篇Codelab只对核心代码进行讲解，common为公共能力层，feature为功能模块层，本示例分为六个模块，product则为产品层。对于完整代码，我们会在源码下载提供。

4.1 启动页

在工程pages目录中，选中Index.ets，点击鼠标右键 > Refactor > Rename，改名为SplashPage.ets。改名后，修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/SplashPage。在该页面的周期函数aboutToAppear里添加一个2秒的定时任务跳转到主页实现。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

4.2 主页

本篇Codelab主页由Tabs容器组件和四个TabContent子组件组成，四个TabContent页签的内容视图分别为首页（Home）、新品（NewProduct）、购物车（ShopCart）、我的（Personal）。根据用户使用场景，通过响应式布局的媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值，设置Tabs的页签位置，lg断点如平板显示侧边栏，其他断点的则显示底部栏。

5.1 首页标签页

首页标签页通过自适应布局的均分、拉伸等能力实现搜索框、分类等布局，通过响应式布局的媒体查询、断点能力设置轮播图数、商品列表数。

通过响应式布局的媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值设置商品列表列数和轮播图数，lg断点显示4列3张轮播图，md断点显示3列2张轮播图，sm断点显示2列1张轮播图。

使用自适应布局均分能力，在Flex布局中设置主轴上的对齐方式为FlexAlign.SpaceAround，循环渲染的组件的相邻之间距离相同，第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

5.2 新品标签页

新品标签页由轮播图、分类、新品列表组成，通过响应式布局的媒体查询、断点能力和自适应布局的均分能力，实现不同设备类型显示不同效果，实现逻辑同主页。

通过响应式布局的媒体查询，监听应用窗口宽度变化，获取当前应用所处的断点值设置新品列表，sm断点显示2列，md、lg断点显示3列。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

5.3 购物车标签页

购物车标签页，由购物车列表和商品列表组成，商品列表实现逻辑同主页的商品列表，购物车列表使用自适应布局的均分能力实现。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

5.4 我的标签页

我的标签页主要由个人信息、我的订单、文字图片按钮、直播列表组成，直播列表实现方案同主页商品列表，其他则使用自适应布局的均分能力，Flex布局设置主轴上的对齐方式为FlexAlign.SpaceAround。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

5.5 商品详情页

商品详情页整体由轮播图、商品信息、底部按钮栏组成，通过响应式布局能力的栅格布局，实现不同设备类型显示不同的效果，并通过自适应布局的拉伸能力，设置flexGrow属性使按钮位于底部。

在sm断点下，轮播图占4个栅格，商品信息占4个栅格，底部按钮栏占4个栅格。
在md断点下，轮播图占8个栅格，商品信息占8个栅格，底部按钮栏占8个栅格。
在lg断点下，轮播图占12个栅格，商品信息占8个栅格偏移2个栅格，底部按钮栏占8个栅格偏移2个栅格。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

5.6 订单确认页

订单确认页由上方收件信息、订单信息、底部的总价和提交订单按钮组成，通过响应式布局的栅格布局，实现不同设备类型显示不同的效果，并通过自适应布局的拉伸能力，设置flexGrow属性使总价和提交订单按钮位于底部。

在sm断点下，上方收件信息和订单信息占4个栅格，底部总价占2个栅格，底部提交订单按钮占2个栅格。
在md断点下，上方收件信息和订单信息占8个栅格，底部总价占2个栅格，底部按钮占3个栅格偏移3个栅格。
在lg断点下，上方收件信息和订单信息占8个栅格偏移2个栅格，底部总价占2个栅格偏移2个栅格，底部按钮占3个栅格偏移3个栅格。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

5.7 订单支付页

订单支付页整体由上方订单信息和底部的去支付按钮组成，通过使用响应式布局的栅格布局实现不同设备类型显示不同效果，并通过自适应布局的拉伸能力，设置flexGrow属性使去支付按钮位于底部。

在sm断点下，上方订单信息占4个栅格，底部去支付按钮占2个栅格偏移2个栅格。
在md断点下，上方订单信息占8个栅格，底部去支付按钮占2个栅格偏移6个栅格。
在lg断点下，上方订单信息占8个栅格偏移2个栅格，底部去支付按钮占2个栅格偏移8个栅格。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

5.8 订单列表页

订单列表页整体布局通过响应式布局的栅格布局，实现不同设备类型显示不同的效果。

在sm设备下，整体UX占4个栅格。
在md设备下，整体UX占8个栅格。
在lg设备下，整体UX占8个栅格偏移2个栅格。

手机运行效果图：

折叠屏运行效果图：

平板运行效果图：

6 总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

针对不同屏幕尺寸的设备完成一次开发，多端部署页面设计。
按照三层工程结构划分模块、组织代码。
通过自适应布局、响应式布局、栅格布局实现一次开发，多端部署。

意见反馈

您对该Codelabs的整体评价？

如果您有其他疑问，您也可以通过HarmonyOS开发者社区问答频道来和我们联系探讨。

社区提问智能客服提问

感谢您的反馈! 我们将在数据处理过程中匿名化您的反馈。您的反馈将有助于我们提升codelabs的质量。您提交的数据将被传输至位于中国境内的华为子公司。您的IP地址可能会被用于确定您提交反馈时所在的国家或地区，但是我们不会保存任何与此有关的信息，也不会收集任何可用于识别您与反馈的关系的信息。您提交所述反馈，则视为您同意我们可以将您的数据传输至位于中国的【华为软件技术有限公司】。请注意，如果您位于欧盟/欧洲经济区，则中国的法律可能不会为您的数据提供与欧盟/欧洲经济区法律规定的同等程度的保护。如需更多信息，请阅读《关于华为开发者联盟与隐私的声明》。