【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画（ohos.animator）书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡

章节设定

结构目录介绍-路由介绍-帧动画（ohos.animator）书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍

开发背景

上篇报错缺乏依赖库，这篇咱们继续，另外卓伊凡关联上Git这样直接会把代码推送至gitee项目地址，目前网上各类鸿蒙的文章很多都是错的，大家要注意，其实只有官方文档是对的，其他还有很多是ai生成的文章简直就是乱的，卓伊凡上一篇最后那段就是看了一些文献导致。

注意：给大家重新说下，比我想象中要复杂一些，因为有些其他地方的参考文档都是错的，官方的为准。

前端代码开源地址

https://gitee.com/youyacao/ZDS-zhuoivan

实战开发

首先介绍下文件结构目录

在鸿蒙 Next 5 开发中，清晰了解项目结构目录是高效开发的基础，它如同搭建房屋的蓝图，指引着代码与资源的有序布局。以下为你详细介绍鸿蒙 Next 5 项目结构目录及其关键作用。

一、AppScope

AppScope 是应用的根目录，如同房屋的基石，承载着应用的全局配置与资源。

• app.json5：这是应用的全局配置信息文件，就像应用的 “身份证”，记录着应用的关键信息。其中，bundleName 以反域名形式作为应用的唯一标识，确保应用在系统中的唯一性；versionCode 和 versionName 用于版本管理，前者是区分版本的数字，方便系统识别，后者以字符串形式如 “1.0.0” 呈现给用户，便于用户了解版本；icon 和 label 分别对应应用的图标与名称，展示在用户界面，提升应用辨识度。
• resources：存放应用的全局资源，如公共的图形、多媒体文件、字符串资源以及布局文件等。其中，base 目录下放置通用的资源文件，而 en_US、zh_CN 等国际化资源目录，根据不同语言设置匹配资源，让应用轻松实现多语言支持，适配全球用户。

二、entry

entry 是应用 / 服务模块，编译构建后生成一个 HAP（HarmonyOS Ability Package），可看作是房屋的主体结构，是应用的核心部分。

• src：源代码目录，核心代码的聚集地。

• main：主模块，如同房屋的承重墙，承载关键功能。

• ets：存放 ArkTS 源码，ArkTS 作为鸿蒙应用开发的重要语言，在此书写应用逻辑与交互功能。
• entryability：应用 / 服务的入口，定义了应用的入口能力（Ability），是应用生命周期管理的核心，类似于微信小程序开发中的 app.js，掌控着应用的启动、运行、暂停与销毁等关键阶段。
• pages：应用 / 服务包含的页面，是用户直接交互的界面，每个页面的布局与逻辑代码存放于此。
• utils：工具类的存放位置，存放如数据处理、网络请求等通用工具函数，提高代码复用性。

• resources：存放应用 / 服务模块所用到的资源文件，是模块内的 “装修材料”，与 AppScope 下的全局资源相互配合，共同打造完整的应用体验。

• module.json5：Stage 模型模块配置文件，像模块的 “说明书”，定义了模块的名称、类型、设备类型等信息。其中，name 和 type 决定模块角色与行为，如 “entry” 类型的模块作为入口模块，引导应用启动；deviceTypes 明确模块支持的设备类型，让模块精准适配手机、平板等不同设备。
• build-profile.json5：记录当前的模块信息、编译信息配置项，包含签名信息、编译 SDK 版本、兼容 SDK 版本、产品配置等，指导 Hvigor 构建工具如何构建应用或服务，如同施工指南。
• hvigor：负责配置和管理项目的构建过程，通过相关配置文件，确保项目从代码到可执行文件的顺利转换。
• hvigor-config.json5：指定 hvigor 的版本、构建依赖以及构建行为的配置参数，保障构建过程的稳定性与一致性。
• oh_modules：存放三方库依赖信息，包含应用 / 服务所依赖的第三方库文件，如同建筑中的辅助材料，丰富应用功能。

三、其他重要目录与文件

• .hvigor：鸿蒙应用工程中负责存储构建过程中的缓存和报告的地方，提升构建效率，方便开发者查看构建信息。
• .idea：包含了 IDE 的项目管理配置，帮助开发工具更好地识别和管理项目。
• .preview：存放预览器在运行时生成的临时文件，方便开发者在开发过程中实时预览应用效果。
• ohTest：单元测试、自动化测试等测试代码的存放位置，保障应用的质量与稳定性。
• .gitignore：设置工程需要忽略上传的目录或文件，如 oh_modules，避免不必要的文件上传，优化版本管理。
• hvigorfile.ts：工程级编译构建任务脚本，允许开发者定义和配置项目的构建任务，如编译、打包、混淆、测试等，掌控构建流程。
• oh-package.json5：工程级依赖配置文件，用于记录引入包的配置信息，类似 vue 工程的 package.json，管理项目依赖。
• oh-package-lock.json5：依赖包版本锁定文件，确保项目在不同环境下依赖包版本的一致性。
• README.md：工程的说明文件及项目备注，方便开发人员阅读，了解项目背景、功能、使用方法等关键信息 。

这个是相当重要的，基础知识，另外额外我们可以创建的文件目录为

能够依据项目的实际需求额外创建文件夹，以下为你介绍一些常见可创建的文件夹及其命名建议：

1. src 目录下

（1）components 文件夹

• 用途：用于存放可复用的组件，这些组件可以是自定义的 UI 组件，像按钮、弹窗、卡片等，在多个页面中重复使用，以此提升代码的复用性。
• 命名示例：src/main/ets/components

（2）styles 文件夹

• 用途：集中管理应用的样式文件，例如 CSS 或者 ArkTS 里的样式代码，这样能让样式代码的组织更加有序，方便维护和修改。
• 命名示例：src/main/ets/styles

（3）apis 文件夹

• 用途：存放与后端接口交互的代码，包含网络请求函数、API 封装等，有助于分离业务逻辑和数据请求逻辑。
• 命名示例：src/main/ets/apis

（4）stores 文件夹

• 用途：如果使用了状态管理库，像 Redux 或者 MobX 等，可将状态管理相关的代码存放在此文件夹中，对应用的状态进行集中管理。
• 命名示例：src/main/ets/stores

（5）constants 文件夹

• 用途：存放项目中的常量，如 API 地址、错误码、枚举值等，方便统一管理和修改这些常量。
• 命名示例：src/main/ets/constants

2. 根目录下

（1）docs 文件夹

• 用途：存放项目的文档，如需求文档、设计文档、接口文档等，方便团队成员查阅和理解项目相关信息。
• 命名示例：docs

（2）scripts 文件夹

• 用途：存放项目的脚本文件，例如自动化部署脚本、数据处理脚本等，用于执行一些特定的任务。
• 命名示例：scripts

命名规范

• 遵循驼峰命名法：文件夹名采用驼峰命名法，比如 userComponents、productApis 等，增强可读性。
• 使用有意义的名称：文件夹名要清晰表达其用途，避免使用无意义的缩写或者随意的名称。例如，使用 styles 而不是 s，使用 components 而不是 com。

这里我们我们需要先介绍到位，然后后面我们都会用到这些知识。

正确安装鸿蒙sdk

Cannot find module ‘@ohos.ui’ or its corresponding type declarations. <ArkTSCheck>

报错这个基本上就是缺乏 鸿蒙sdk 要么就是缺乏 这个ohos.ui库，但是我这里不应该缺乏 才对

重新去华为官方看了下文档， 需要思考一下，并且查看了 支持的组件，以下是默认支持的组件，也就是说我们之前的写法是有问题的，

ArkTS 是为鸿蒙系统开发应用设计的主力语言，在开发中可借助许多默认支持的组件来构建丰富的用户界面，这些组件可以分为基础组件、布局组件、容器组件等，以下为你详细介绍：

基础组件

• Text

• 用途：用于显示文本内容。
• 示例代码

Text('这是一段文本')
.fontSize(20)
.fontColor(Color.Black)

• Button

• 用途：创建可点击的按钮，常用来触发特定操作。
• 示例代码

Button('点击我')
.onClick(() => {
console.log('按钮被点击了')
})

• Image

• 用途：展示图片，可以是本地图片或者网络图片。
• 示例代码

Image($r('app.media.sample_image'))
.width(200)
.height(200)

• Input

• 用途：提供用户输入文本的功能。
• 示例代码

@Entry
@Component
struct InputExample {
private inputValue: string = ''
build() {
Input({ placeholder: '请输入内容' })
.onChange((value: string) => {
  this.inputValue = value
})
}
}

布局组件

• Stack

• 用途：将多个组件堆叠在一起，通过设置组件的层级关系实现复杂布局。
• 示例代码

Stack({ alignContent: Alignment.Center }) {
Text('位于中心的文本')
}
.width('100%')
.height('100%')

• Column

• 用途：垂直排列子组件。
• 示例代码

Column() {
Text('第一行文本')
Text('第二行文本')
}

• Row

• 用途：水平排列子组件。
• 示例代码

Row() {
Text('左侧文本')
Text('右侧文本')
}

• Grid

• 用途：以网格形式排列组件。
• 示例代码

Grid({ columnsTemplate: '1fr 1fr' }) {
Text('单元格1')
Text('单元格2')
Text('单元格3')
Text('单元格4')
}

容器组件

• Scroll

• 用途：当内容超出容器显示范围时，提供滚动查看内容的功能。
• 示例代码

Scroll() {
Column() {
// 这里可以放置大量组件
for (let i = 0; i < 20; i++) {
Text(`第 ${i} 行文本`)
}
}
}

• List

• 用途：用于展示列表数据，通常与 ForEach 结合使用。
• 示例代码

@Entry
@Component
struct ListExample {
private dataList: string[] = ['项目1', '项目2', '项目3']
build() {
List() {
ForEach(this.dataList, (item) => {
  ListItem() {
    Text(item)
  }
})
}
}
}

• Swiper

• 用途：实现滑动切换内容的效果，常用于轮播图等场景。
• 示例代码

Swiper() {
Image($r('app.media.image1'))
Image($r('app.media.image2'))
Image($r('app.media.image3'))
}

尝试随意写一点内容

Column() {
Text(‘第一行文本’)
Text(‘第二行文本’)
}

生效，原来如此，

如何写一个动画呢？？

我找到了帧动画（ohos.animator） 原来是这个

引入依赖代码

import { AnimatorOptions, AnimatorResult } from ‘@kit.ArkUI’;

是这个，完整示例如下：

import { AnimatorOptions, AnimatorResult } from '@kit.ArkUI';
@Entry
@Component
struct Index {
  @State animatorOptions: AnimatorResult | undefined = undefined;
  @State animatorStatus: string = '创建';
  begin: number = 0;
  end: number = 300
  topWidth: number = 150;
  bottomHeight: number = 100;
  g: number = 0.18
  animatorOption: AnimatorOptions = {
    duration: 4000,
    delay: 0,
    easing: 'linear',
    iterations: 1,
    fill: "forwards",
    direction: 'normal',
    begin: this.begin,
    end: this.end
  };
  @State translateX: number = 0;
  @State translateY: number = 0;
  onPageShow(): void {
    this.animatorOptions = this.getUIContext().createAnimator(this.animatorOption)
    this.animatorOptions.onFrame = (progress: number) => {
      this.translateX = progress;
      if (progress > this.topWidth && this.translateY < this.bottomHeight) {
        this.translateY = Math.pow(progress - this.topWidth, 2) * this.g;
      }
    }
    this.animatorOptions.onCancel = () => {
      this.animatorStatus = '取消';
    }
    this.animatorOptions.onFinish = () => {
      this.animatorStatus = '完成';
    }
    this.animatorOptions.onRepeat = () => {
      console.log("动画重复播放");
    }
  }
  onPageHide(): void {
    this.animatorOptions = undefined;
  }
  build() {
    Column() {
      Column({ space: 30 }) {
        Button('播放').onClick(() => {
          this.animatorOptions?.play();
          this.animatorStatus = '播放中';
        }).width(80).height(35)
        Button("重置").onClick(() => {
          this.translateX = 0;
          this.translateY = 0;
        }).width(80).height(35)
        Button("暂停").onClick(() => {
          this.animatorOptions?.pause();
          this.animatorStatus = '暂停';
        }).width(80).height(35)
      }.width("100%").height('25%')
      Stack() {
        Button()
          .width(60)
          .height(60)
          .translate({ x: this.translateX, y: this.translateY })
      }
      .width("100%")
      .height('45%')
      .align(Alignment.Start)
      Text("当前动画状态为:" + this.animatorStatus)
    }.width("100%").height('100%')
  }
}

这才是可用的动画，还是得看官方文档，那接下来就看官方文档了

路由介绍

这里我们很好奇，我们写其他框架都会要去手动写路由页面，但是鸿蒙arkts 为啥不需要？
不是不需要 是已经为我们生成好了，src/main/resources/base/profile/main_pages.json 路劲下这个json文件就是处理路由的，当我们每次新建文件的时候已经给我们生成好了，这其实是约定式路由，

约定式路由是一种通过约定来定义路由的方式，通常用于 Web 应用和前端框架中。它的基本思想是通过文件夹和文件的结构自动生成路由，而不是手动配置路由。这种方式可以减少配置文件的复杂性，使得路由管理更加简洁和直观。

约定式路由的特点

自动生成：通过约定的目录结构和文件命名规则自动生成路由。

简化配置：减少手动配置文件，减少出错的可能。

直观清晰：通过项目目录结构即可直观了解路由结构。

由于篇幅过多，更多内容必须下一篇了，此前那个写法就是错的没边界了。