HarmonyOS NEXT - 电商App实例一 （创建项目）

        现在主流电商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哀求、界面数据渲染等。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。