目前主流电商App的整体风格设计方面，采用简洁明快的色彩方案，以白色为主色调，搭配品牌色作为辅助色，增强品牌的识别度。商品的布局采用卡片式布局，将商品信息、功能模块等以卡片形式展示，便于用户快速浏览和操作。
HarmonyOS为开发者提供了一套声明式的UI开发语言（ArkUI框架），它可以更加简单快捷地设计和实现复杂的UI布局。利用ArkUI框架，开发者可以实现灵活的布局管理、主题切换、动画效果等功能。
这里，我们将使用HarmonyOS技术，使用DevEco Studio开发工具，运用ArkTS开发语言，开发一套电商App前端UI界面。界面功能如下：
1）首页：顶部导航栏、轮翻图区域、分类导航、推荐商品区域、底部导航栏。
2）分类页面：分类筛选栏、商品列表展开、分类导航栏（左侧分类信息）
3）商品详情页：商品图片展示、商品详情介绍、购买功能项、收藏功能等。
4）购物车页面：商品列表、数量调整、删除商品、结算按钮。
5）我的页面：用户信息展示、订单管理、收藏夹、设置功能。
一、DevEco Studio
首先，HarmonyOS应用开发，官方提供了DevEco Studio集成开发工具（IDE），集成了大量的开发、调试和发布工具，可以大大提高开发效率。开发者需要熟悉其界面布局、常用功能以及快捷操作，掌握如何高效地使用这个工具进行应用开发。
1.1 创建项目
电脑上DevEco Studio已安装好，直接双击打开它。如果还未安装，可以云官方下载IDE工具，地址：开发-HarmonyOS NEXT鸿蒙应用开发平台-华为开发者联盟。
IDE工具打开后，选择 文件 -> 新建 -> 新建项目，如下图：
选择“Empty Ability”，点击“Next”下一步操作。
按图上说明，修改项目名称，以及项目文件存放目录。
点击“finish”后，项目就创建完成了。如下图：
想预览界面效果，可以点击IDE工具右侧的“预览”进行查看，如下图：
1.2 项目结构
在HarmonyOS的开发框架中，entryability、entrybackupability、page、resources以及module.json5扮演着重要的角色。如下图：
1.2.1 entryability
存放Entry Ability相关的代码和资源。Entry Ability是鸿蒙应用中的核心概念。它代表应用的一个可独立运行的入口点，类似于传统应用中的Main函数。
1.2.2 entrybackupability
提供应用的扩展备份恢复能力，它不是应用入口点，而是作为应用数据备份和恢复的一个扩展功能。EntryBackupAbility继承自BackupExtensionAbility，允许应用在需要时备份数据，并在恢复时重新加载这些数据。这是对于保护用户数据和确保应用在不同设备或不同时间点的数据一致性非常重要。
1.2.3 page
存放应用/服务包含的页面，在HarmonyOS的ets开发中，页面是用户与应用进行交互的重要界面。包括的.ets文件（如用于描述UI布局、样式、事件交互和页面逻辑）。
1.2.4 resources
存放应用/服务模块所用到的资源文件，这些资源文件包含图形、多媒体、字符串、布局文件等，是构建用户界面和应用功能所必需的。
另外，根据资源类型和用途的不同，resources目录可能包含多个子目录，如base目录（包含公共的字符串、布局文件等资源）、media（存放全局公共的多媒体资源文件），rawfile（存放公共图片资源），以及国际化资源目录（如en_US、zh_CN等，根据不同语言设置匹配资源）等。
1.2.5 module.json5
作为块级别的配置文件，它定义了模块的名称、类型、设备类型等信息。这个文件就像模块的“说明书”，告诉系统这个模块是做什么的，能在哪些设备上运行。
module.json5文件包含多个配置项，如name（模块的名称）、type（模块的类型，如entry、feature、har）、deviceTypes（模块支持的设备类型）等。此外，还包含应用组件信息（如UIAbility组件和ExtensionAbility组件的描述信息）、应用运行过程 中所需要的权限信息等。
二、准备工作
在开发界面前，先在HarmonyOS的ets目录中，创建components（自定义组件）、api（http请求）types（数据类型定义）、utils（工具包）等，它们在项目中各自扮演着重要的角色。目录结构如下图：
2.1 components
开发者可以创建自定义的UI组件，如自定义按钮、输入框等，以满足特定的设计需求或功能需求。
作用：
- 可组件性：允许开发者组合使用系统组件及其属性和方法，从而构建出更加复杂或更丰富的用户界面。
- 可重用性：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用，提高代码的可复用性和开发效率。
- 数据驱动UI：通过状态变量的改变来驱动UI的刷新，使得用户界面能够实时响应数据的变化。
2.2 api
在HarmonyOS中，在ets目录下创建api目录，用于存放http请求封装类、http请求业务，有助于实现代码的模块化设计、提高代码的利用性和可维护性、便于团队协作以及支持快速迭代开发。
作用：
- 处理业务逻辑：请求业务负责处理和HTTP请求相关的业务逻辑，根据响应数据更新应用状态、调用其他业务模块。
- 数据转换与校验：请求业务通常会对服务器返回的数据进行转换和校验，确保数据的准确性和一致性。
- 异常处理：在请求过程中，会遇到各种异常（如网络错误、服务器错误等），请求业务类负责捕捉并处理这些异常，确保应用的稳定性和用户体验感。
- 与View层交互：请求业务类将处理后的数据传递给View层进行展示，同时接收View层的用户操作请求，并触发相应的HTTP请求，与后台数据进行交互。
2.3 types
在HarmonyOS中，开发者需要在types目录中定义应用中使用的各种数据类型，以便在代码中进行类型检查和约束。
作用：
- 定义数据类型：存放应用中使用的各种数据类型定义，包括：整形、浮点型、字符型、布尔值、字符串、枚举以及数组和集合类型等。
- 提高代码可读性：通过明确的数据类型定义，使得代码更加规范、易于理解和维护。
2.4 utils工具包
在HarmonyOS中，utils工具包类通常包含一些通用的、辅助性的功能的实现，如字符串格式化、数据转换、日期的格式化等。这些功能可以被应用中的各个模块共享和使用。
作用：
- 提供常用功能：提供大量常用的、经过优化的功能实现，如字符串处理、日期的格式化、数据保存和读取等。
- 提高开发效率：开发者可以直接调用这些工具函数，而无需从头开始编写代码，提高代码的复用性，从而节省开发时间。
三、界面搭建
现在，我们使用HarmonyOS的ArkTs-UI框架，完成电商App的界面搭建工作。
3.1 创建page
选中“pages”目录进行右击，选择“新建” -> “Page” -> “Empty Page”，创建新界面。
创建“我的”页面，修改新界面文件名称。如下图：
点击“Finish”后，“我的”界面就创建成功了，如下图：
现在，项目中的首页、我的页面已经创建成功了，其他页面（如分类页面、商品详情页、购买车页面）使用同样方法进行创建即可。
3.2 main_pages.json
通过Page -> Empty Page方法创建新界面，好处是新界面创建完成后，IDE工具会自动将新界面的路径添加到main_pages.json文件中；当然，界面创建也可以直接通过“ArkTs File”选项来创建，但是main_pages.json中的路由则需要手动添加。注意的是，如果main_pages.json中未配置跳转界面的路径，则无法通过router完成界面的跳转。
3.3 自定义组件
App界面中，如顶部的导航栏、底部的导航栏存在通用性；另外，不同界面对顶部的导航有着不同业务需求，并且呈现效果也存在差异，其构建功能也较为复杂；所以，需要通过状态变量来驱动数据传递，改变导航栏在不同界面中的展示效果，完成不同功能操作等。
在components目录上右击，选择“新建” -> “ArkTS File”，创建Header和Navigaiton自定义组件。如下图：
这期先讲到这，后期会对界首页、我的页面、分类页面、商品详情页、购买车页面的界面搭建、代码编写、交互功能进行详细讲解，以及API请求、界面数据渲染等。