鸿蒙实战：ArkTs 开发一个鸿蒙应用

hi 大家好，我是 DHL。就职于美团、快手、小米。公众号：ByteCode，分享有用的原创文章，涉及鸿蒙、Android、Java、Kotlin、性能优化、大厂面经

前面两期内容主要介绍了 ArkTs 的基础语法，以及相比 TypeScript 有什么不同之处，和升级到 DevEco Studio 4.0 以后，如何解决静态检查导致的编译错误。

这篇文章我们用前面学习过的 ArkTs 知识点，一步一步开发一个小的鸿蒙应用示例，涉及到 ArkTs 语法、注解 @Entry 、 @Component、@state、路由、生命周期、@Prop、 @Link 、常用组件的使用等等知识点。

要开发一个鸿蒙应用，首先我们需要知道 系统是如何找到页面的启动入口。

鸿蒙如何启动应用

在 HarmonyOS 中，应用程序的启动入口 UIAbility，它继承自 Ability，所以我们需要声明一个 EntryAbility。EntryAbility 继承自 UIAbility。HarmonyOS 中的 Ability 类似于 Android 中的 Activity 是应用与用户交互的一个窗口。

我们需要在 module.json5 配置文件中指定 EntryAbility，系统就是靠这个配置来识别启动应用入口。

ts 复制代码

{
  "module": {
    ......
    "pages": "$profile:main_pages", // 通过profile下的资源文件配置
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "exported": true,
        ......
      }
    ]
  }
}

配置文件中 pages 标签，在有 UIAbility 的场景下标签不能省略，用来声明路由跳转路径，如果想通过路由的方式，实现页面之间的跳转，需要在 pages 标签指向的文件 $profile:main_pages，添加页面的路径，否则无法跳转。

ts 复制代码

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

而 $profile:main_pages 指向的路径是文件夹 resources/base/profile 下面的配置文件 main_pages.json，其中文件名 (main_pages) 可自定义，和 pages 标签保持一致即可。

另外配置文件中还有一个 exported 标签，exported 标识当前 UIAbility 组件是否可以被其他应用调用。默认值为 false。

true ：表示可以被其他应用调用
false ：表示不可以被其他应用调用

如果这个 UIAbility 作为程序的启动入口，应该将 exported 设置为 true，否则启动时会报错。

ts 复制代码

error: failed to start ability.
Error while Launching activity

如果这个 UIAbility 不可以被其他应用调用，也不作为程序的启动入口，那么 exported 应该设置为 false。避免带来安全问题。

当 HarmonyOS 应用启动时，系统首先会创建一个 EntryAbility 实例，实例创建完成之后，在进入 Foreground 之前，系统会创建一个 WindowStage 实例，每一个 Ability 实例，都对应一个 WindowStage 实例。

WindowStage 为本地窗口管理器，用于管理窗口相关的内容，例如与界面相关的获焦/失焦、可见/不可见。Ability 的生命周期和 WindowStage 回调对应的关系，如下图所示。

左图表示 UIAbility 的生命周期，每个生命周期分别做什么事，我会在下篇文章中分析，而右图表示 WindowStage 回调。

正如图中所示，在进入 Foreground 之前，系统会调用 onWindowStageCreate() 方法，在这方法中通过 loadContent() 方法设置启动时要加载的页面。

ts 复制代码

export default class EntryAbility extends UIAbility {
  ......
  onWindowStageCreate(windowStage: window.WindowStage): void {

    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        // 页面加载失败处理
        return;
      }
      // 页面加载成功
    });
  }

  onWindowStageDestroy(): void {
    // window 被销毁，释放 UI 资源
  }
}

我们在 loadContent() 方法中指定了要加载页面的路径 pages/Index 和一个回调函数，这样系统就会按照我们的配置寻找到要加载的页面。

当页面加载成功之后，接下来就是渲染 UI 了，那么 HarmonyOS 是如何渲染 UI。

如何渲染 UI

ArkTS 通过 struct 声明自定义组件名，使用 @Entry 和 @Component 装饰的自定义组件作为页面的入口。

ts 复制代码

@Entry
@Component
struct Index {
    ......
}

而页面上的 UI 通过 build 方法进行构建，会在页面加载时首先进行渲染。

ts 复制代码

@Entry
@Component
struct Index {
  build() {
    Text("Hello World)
  }
}

build 方法主要用于构建和返回 UI 布局和组件，它的主要职责是构建应用的 UI，不允许执行业务逻辑或者其他非 UI 的操作。这是为了确保 UI 代码的清晰性和维护性，同时遵循了关注点分离（Separation of Concerns）的原则。

这可能有人会有疑问，如果不在 build 方法写非 UI 逻辑，那么数据变化了，怎么更新 UI 呢，这就需要用到注解 @state，在 HarmonyOS 中注解有很多，其中 @state 至关重要。而且注解 @state 在实际开发中用的非常频繁。

注解 @state 主要用于刷新 UI, 当用注解 @state 标记的成员变量内容发生变化时，会自动重新渲染 UI。具体的表现如下图所示。

点击左图上的按钮，会获取数据, 当数据变化时，会自动刷新 UI，结果如右图所示。那么在代码中如何实现呢。

我们可以在代码中，声明一个用注解 @State 标记的成员变量 listItems。

ts 复制代码

@State private listItems: Array<string> = [];

然后在 build 方法中遍历 listItems 渲染 UI。

ts 复制代码

  build() {
    Column() {
        ForEach(this.listItems, (item: string) => {
          Column() {
            Text(item)
          }
        })
    }
  }

最后我们在 Button 中绑定 onClick 事件，点击时更新 listItems 数据，当 listItems 数据发生变化时，会自动重新渲染 UI 调用 build 方法刷新布局。

ts 复制代码

  parseData() {
    for (let i = 0; i < 10; i++) {
      this.listItems.push(` item ${i}`)
    }
  }

  build() {
    Column() {
        Button("click me")
          .onClick(() => {
            this.parseData()
          })
        ForEach(this.listItems, (item: string) => {
          Column() {
            Text(item)
          }
        })
    }
  }

为了方便阅读，文章中的代码我做省略，代码已经上传到 github 仓库 HarmonyPractice 中，具体代码文件路劲如下所示。欢迎前往查看，如果有帮助，欢迎点击 HarmonyPractice 仓库右上角 star 以兹鼓励。

HarmonyPractice仓库路径 [github.com/hi-dhl/Harm...](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fhi-dhl%2FHarmonyPractice%255D(https%3A%2F%2Fgithub.com%2Fhi-dhl%2FHarmonyPractice "https://github.com/hi-dhl/HarmonyPractice](https://github.com/hi-dhl/HarmonyPractice")
代码文件路径 HarmonyPractice/Sample/entry/src/main/ets/pages/Second.ets

因为篇幅问题 @Prop、 @Link、路由、生命周期，我放在了下篇文章。这篇文章到这里就结束了。

感谢你的阅读，写技术文章不易，如果文章对你有帮助，欢迎在看、点赞、分享给身边的朋友，你的点赞是我持续更新的动力。

鸿蒙还处于初期发展阶段，网上对鸿蒙问题的解答太少了，所以建了一个鸿蒙学习交流群，群里有很多大佬，相比于自己去摸索，通过与大家的沟通交流，效率会提高很多。诚邀各位小伙伴一起来打造一个良好的学习氛围沟通群。我在学习过程中也遇到了不少问题，有兴趣的小伙伴，可以看一下这篇文章，列举了我遇到的鸿蒙安装编译常见问题，以及解决方案。

学习鸿蒙，解决这几个关键问题

目前群成员已经超过 200 人，不能扫描加入，喜欢或者正在学习鸿蒙的小伙伴，欢迎加我个人微信: hi-dhl，备注鸿蒙，我拉你进群。

2024，加油！

2024，一起见证彼此成长！

同时我在 github 上新建了一个 HarmonyPractice 仓库，这个仓库主要用于演示 ArkTS 语法规则、鸿蒙组件的使用，以及鸿蒙实战项目，欢迎点击 HarmonyPractice 仓库右上角 star 以兹鼓励。

HarmonyPractice：https://github.com/hi-dhl/HarmonyPractice

Hi 大家好，我是 DHL，在美团、快手、小米工作过。公众号：ByteCode ，分享有用的原创文章，涉及鸿蒙、Android、Java、Kotlin、性能优化、大厂面经，真诚推荐你关注我。

最新文章

开源新项目

云同步编译工具（SyncKit），本地写代码，远程编译，欢迎前去查看 SyncKit
KtKit 小巧而实用，用 Kotlin 语言编写的工具库，欢迎前去查看 KtKit
最全、最新的 AndroidX Jetpack 相关组件的实战项目以及相关组件原理分析文章，正在逐渐增加 Jetpack 新成员，仓库持续更新，欢迎前去查看 AndroidX-Jetpack-Practice
LeetCode / 剑指 offer，包含多种解题思路、时间复杂度、空间复杂度分析，在线阅读