本文旨在介绍开发者如何快速入门鸿蒙应用开发，关于IDE下载、环境搭建等基础工作大家可以参考官方文档，本文将不再赘述。同时，由于Harmony OS在迭代过程中诞生了不少的开发模式，本文后续所有的介绍都只针对最新的Stage模型和ArkTS语言来介绍。
关于IDE（DevEco Studio）的下载、安装和环境配置可参考如下官方文档： developer.harmonyos.com/cn/develop/...
一. 基本概念介绍
在正式介绍如何开发鸿蒙（HarmonyOS）应用之前，先介绍几个基本概念：DevEco Studio、ArkTS、ArkUI
-
DevEco Studio ：官方IDE，从界面及功能上来看应该是基于JetBrains的开源IDE二次开发而来的，用过JetBrains相关IDE和Android Studio的同学应该是比较熟悉的。关于DevEco Studio的下载、安装和环境配置可参考如下官方文档：developer.huawei.com/consumer/cn...
-
ArkTS：华为官方的HarmonyOS应用开发语言，它在保持了TypeScript（简称TS）基本语法风格的基础上，同时对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力。更通俗的理解是：ArkTS是TypeScript的超集，TypeScript是JavaScript的超集。
-
ArkUI：和Flutter UI、iOS SwiftUI、Android Jetpack Compose一样，ArkUI是一套基于ArkTS语言实现的声明式UI开发框架。熟悉这些框架或者ReactNative的同学很容易上手。
二. 运行你的第一个HarmonyOS应用
在熟悉了上述概念，并完成IDE安装和环境配置后，我们就可以创建一个HarmonyOS应用，熟悉下项目结构了。通过DevEco Studio创建我们的第一个应用FirstApplication后即可看到如下项目结构：
- AppScope > app.json5：应用程序的的全局配置信息就在这个文件中定义
- entry ：应用/服务模块，编译构建生成一个HAP。类似于Android开发中的App Module
- src > main > ets：用于存放ArkTS源码。
- src > main > ets > entryability：应用程序或者服务的入口。
- src > main > ets > pages：应用程序或者服务的页面一般定义在这里。
- **src > main > resources：**用于存放应用程序或者服务所用到的资源文件，如图形、字符串、布局文件等
- src > main > module.json5：Stage模型模块配置文件，主要包含HAP的配置信息、应用程序在具体设备上的配置信息以及全局配置信息。
- oh_modules：存放三方库依赖信息。
- **build-profile.json5：**当前的模块信息、编译信息配置项，包括buildOption、targets配置等
- hvigorfile.ts：模块级的编译构建脚本。
- oh-package.json5：配置三方包声明文件的入口和包名。
- **build-profile.json5：**应用级配置信息，包括签名、产品配置等。
- **hvigorfile.ts：**应用级编译构建任务脚本。
这里我们只需要了解基本的项目结构即可，各种配置文件如何配置官网都有对应性的文档介绍，大家在开发中边做边学即可。
打开src > main > ets > entryability>EntryAbility.ets文件，可以看到我们应用程序的入口代码，如下：
typescript
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
// 应用（Ability）创建
}
onDestroy(): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
// 应用（Ability）被销毁
}
onWindowStageCreate(windowStage: window.WindowStage): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
// 窗口创建，这里的loadContent用来加载我们应用的启动页面（这里是index页面）
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
onWindowStageDestroy(): void {
// 窗口销毁，释放与UI相关的资源
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}
onForeground(): void {
// Ability回到前台
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
}
onBackground(): void {
// Ability回到后台
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
}
}通过上述代码的注释，我们可以很清晰的了解到应用程序的生命周期和前后台切换回调等等。
接下来打开我们的启动页src > main > ets > pages>index.ets
typescript
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}修改这个index.ets成为你想要的样子，就可以运行了。HarmonyOS和Android不一样的是，本地运行也需要登陆账号签名，跟做IDE的提示做就可以了。这样我们的首个使用ArkTS开发的、基于Stage模型的鸿蒙App就开发运行成功了。
ArtTS语法快速入门
ArkTS是HarmonyOS应用程序开发的首选语言，类似于Android的Kotlin、iOS的Swift。开篇我们介绍过：ArkTS是TypeScript的超集，TypeScript是JavaScript的超集。目前ArkTS对TS的扩展主要体现在如下三个方面：
-
语法层面
ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。说白了就是为了支持ArkTS开发应用界面。
-
状态管理
ArkTS提供了状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。
另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以利用这些能力来实现数据和UI的联动。说白了就是为了支持声明式UI开发。
-
渲染控制 ：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。说白了就是支持声在UI代码中if/else、ForEach等条件渲染方式。
熟悉Android ComposeUI和iOS SwiftUI的同学对这方面应该驾轻就熟了。未来ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。
基本语法介绍
- 装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
- UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
- 自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
- 系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
- 属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
- 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。
- 系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。
HarmonyOS中的声明式UI
同ComposeUI和SwiftUI一样，ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。
创建组件
ts
Text('test')
.fontSize(12)
Image('test.jpg')
.alt('error.jpg')
.width(100)
.height(100)配置事件
ts
Button('Click me')
.onClick(() => {
this.myText = 'ArkUI';
})容器中加入子组件
js
Column() {
Row() {
Image('test1.jpg')
.width(100)
.height(100)
Button('click +1')
.onClick(() => {
console.info('+1 clicked!');
})
}
}状态管理
如果希望构建一个动态的、有交互的界面，就需要引入"状态"的概念。在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。
如果我们的自定义组件拥有变量，变量必须被装饰器装饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新。如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。
装饰状态常量的装饰器比较常用的有：
@State装饰器：组件内状态
@Prop装饰器：父子单相同步
@Link装饰：父子双相同步
这里部分不难理解，但是要完整介绍需要不少篇幅，大家可以直接参考官方文档 developer.harmonyos.com/cn/docs/doc...
控制渲染
控制渲染就更简单了，主要就是用条件控住语句来控制UI的渲染。如前面提到的if/else、ForEach等。这个拿if/else里举例：
ts
@Entry
@Component
struct ViewA {
@State count: number = 0;
build() {
Column() {
Text(`count=${this.count}`)
if (this.count > 0) {
Text(`count is positive`)
.fontColor(Color.Green)
}
Button('increase count')
.onClick(() => {
this.count++;
})
Button('decrease count')
.onClick(() => {
this.count--;
})
}
}
}当用户点击Button改变count的数值时，Text组件线上的文字及文字颜色就会按照条件语句，根据count的值来改变。
结尾
了解了上述概念，我们就可以上手鸿蒙应用程序的开发了。由于只是介绍如何入门，这里很多内容都是一笔代码，更多的知识点也需要大家在尝试开发HarmonyOS App的时候慢慢学习了。我相信"在做中学"才是掌握一门技能最快的方法。
同时华为的开发中官网也制作了很多优质的入门学习视频，有兴趣的同学可以花时间看看。地址如下：developer.harmonyos.com/cn/document...
后续关于鸿蒙的文章，我会主要介绍如何在鸿蒙平台实现一套路由框架，敬请期待吧！