HarmonyOS Codelab 优秀样例——购物应用，体验一次开发多端部署魅力

 

一. 样例介绍

本篇Codelab基于自适应布局和响应式布局，实现购物应用在手机、折叠屏、平板不同屏幕尺寸设备上按不同设计显示。通过三层工程结构组织代码，实现一次开发，多端部署 。

手机运行效果如图所示：

 

折叠屏运行效果图：

 

平板运行效果图：

相关概念

• 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用。
• 自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种：拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。
• 响应式布局：当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种：断点、媒体查询、栅格布局。
• GridRow：栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。
• GridCol：栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用。

完整示例：gitee源码地址

二. 环境搭建

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

软件要求

• DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
• HarmonyOS SDK版本：API version 9及以上版本。

硬件要求

• 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
• HarmonyOS系统：3.1.0 Developer Release及以上版本。

环境搭建

1. 安装DevEco Studio，详情请参考下载和安装软件。
2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：

• 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
• 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。

1. 开发者可以参考以下链接，完成设备调试的相关配置：

• 使用真机进行调试
• 使用模拟器进行调试

三.代码结构解读

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

├──common/src/main/ets               // 公共能力层
│  ├──bean
│  │  ├──CommodityModel.ets          // 商品数据实体类
│  │  ├──OrderModel.ets              // 订单数据实体类
│  │  └──ProductModel.ets            // 购物车商品数据实体类
│  ├──components
│  │  ├──CommodityList.ets           // 商品列表组件
│  │  ├──CounterProduct.ets          // 数量加减组件
│  │  └──EmptyComponent.ets          // 无数据显示组件
│  ├──constants
│  │  ├──BreakpointConstants.ets     // 断点常量类
│  │  ├──GridConstants.ets           // 栅格常量类
│  │  └──StyleConstants.ets          // 样式常量类
│  ├──utils
│  │  ├──BreakpointSystem.ets        // 断点工具类
│  │  ├──CommonDataSource.ets        // 数据封装类
│  │  ├──LocalDataManager.ets        // 数据操作管理类
│  │  ├──Logger.ets.ets              // 日志工具类
│  │  └──Utils.ets                   // 方法工具类
│  └──viewmodel
│     └──ShopData.ets                // 商品应用数据
├──features                          // 功能模块层
│  ├──commoditydetail/src/main/ets   // 商品详情内容区
│  │  ├──bean
│  │  │  └──TypeModel.ets            // 实体类
│  │  ├──components
│  │  │  ├──CapsuleGroupButton.ets   // 自定义按钮组件
│  │  │  ├──CommodityDetail.ets      // 商品详情组件
│  │  │  └──SpecificationDialog.ets  // 商品规格弹框
│  │  ├──constants
│  │  │  └──CommodityConstants.ets   // 商品详情区常量类
│  │  └──viewmodel
│  │     └──CommodityDetailData.ets  // 商品详情数据类
│  ├──home/src/main/ets              // 首页内容区
│  │  ├──components
│  │  │  └──Home.ets                 // 首页内容组件
│  │  └──viewmodel
│  │     └──HomeData.ets             // 首页数据
│  ├──newproduct/src/main/ets        // 新品内容区
│  │  ├──components
│  │  │  └──NewProduct.ets           // 新品内容组件
│  │  └──viewmodel
│  │     └──NewProductData.ets       // 新品数据
│  ├──orderdetail/src/main/ets       // 订单相关内容区
│  │  ├──components
│  │  │  ├──AddressInfo.ets          // 收件人信息组件
│  │  │  ├──CommodityOrderItem.ets   // 商品订单信息组件
│  │  │  ├──CommodityOrderList.ets   // 商品订单列表组件
│  │  │  ├──ConfirmOrder.ets         // 确认订单组件
│  │  │  ├──HeaderBar.ets            // 标题组件
│  │  │  ├──OrderDetailList.ets      // 订单分类列表组件
│  │  │  ├──OrderListContent.ets     // 订单分类列表内容组件
│  │  │  └──PayOrder.ets             // 支付订单组件
│  │  ├──constants
│  │  │  └──OrderDetailConstants.ets // 订单区常量类
│  │  └──viewmodel
│  │     └──OrderData.ets            // 订单数据
│  ├──personal/src/main/ets          // 我的内容区
│  │  ├──bean
│  │  │  └──IconButtonModel.ets      // 按钮图标实体类
│  │  ├──components
│  │  │  ├──IconButton.ets           // 图片按钮组件
│  │  │  ├──LiveList.ets             // 直播列表组件
│  │  │  └──Personal.ets             // 我的内容组件
│  │  ├──constants
│  │  │  └──PersonalConstants.ets    // 我的常量类
│  │  └──viewmodel
│  │     └──PersonalData.ets         // 我的数据
│  └──shopcart/src/main/ets          // 购物车内容区