HarmonyOS鸿蒙应用开发 (一、环境搭建及第一个Hello World)_arkts配置各个.ets文件均可以访问某个文件共用文件

万事开头难。难在迈出第一步。心无旁骛，万事可破。没有人一开始就能想清楚，只有做起来，目标才会越来越清晰。--马克.扎克伯格

前言

2024年1月16日，华为目前开启已HarmonyOS NEXT开发者预览版Beta招募，报名周期为1月15日-1月22日。HarmonyOS NEXT开发者预览版将不再兼容安卓开源应用，仅支持鸿蒙内核和系统的应用，因此被称为“纯血鸿蒙”。

随着时间的发展，我们惊喜的看到鸿蒙的生态版图不断扩大，获得更多的认可，有更多的开发者投身其中，点亮鸿蒙的星星之火。这里预测下未来十年，必将是国产系统红红火火的十年，鸿蒙系统必将超越android。特别是基于鸿蒙的PC问世，将带来重磅的影响力，手机和PC可以无缝衔接，带来极好的应用体验和创新。

当然，鸿蒙的价值绝不仅是一个操作系统，其目标也绝不止"三分天下有其一"。它更大的价值是无处不在连接的中心，能把各种设备融合起来，通过生态形成一个强大的数字平台和底座。

华为与伙伴共同构建的"鸿蒙世界"，才刚刚开始。鸿蒙4的到来，也让鸿蒙的未来更加可期。为什么鸿蒙系统必然成功，成为未来趋势呢？因为大环境使然，因为历史的车轮也在推动它向前进，没有退路。

未来基于鸿蒙PC的软件生态，更将带来鸿蒙软件生态的繁荣。 拥抱大趋势，提前学习下鸿蒙应用开发是很有必要。

万事开头难。难在迈出第一步。心无旁骛，万事可破。没有人一开始就能想清楚，只有做起来，目标才会越来越清晰。

环境搭建

官网地址：华为开发者联盟-智能终端能力开放,共建开发者生态

IDE下载链接：HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

环境搭建很简单，直接下载IDE安装即可。 感觉这比android开发可简单许多。应用/服务支持API Version 4至9，首次使用DevEco Studio，工具的配置向导会引导您下载SDK及工具链。配置向导默认下载 API Version 9的SDK及工具链。

关于开发语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

当前，ArkTS在TS的基础上主要扩展了如下能力：

• 基本语法：ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
• 状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活地利用这些能力来实现数据和UI的联动。
• 渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。

关于ArkUI

方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

基本概念

• UI：即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。

• 组件：UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

关于应用模型

FA模型和Stage模型

应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。

随着系统的演进发展，HarmonyOS先后提供了两种应用模型：

• FA（Feature Ability）模型： HarmonyOS API 7开始支持的模型，已经不再主推。
• Stage模型： HarmonyOS API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

FA模型（Feature Ability Model）：
FA模型是OpenHarmony早期用于支持分布式应用开发的一种架构设计。
在FA模型中，应用的核心构建块是“Ability”，它代表了应用的功能单元，可以是页面（Page Ability）或服务（Service Ability）。
应用的生命周期管理、权限请求以及分布式能力调用等均围绕Ability进行设计。
FA模型的配置文件使用的是config.json，工程目录结构相对传统，每个Ability作为独立的功能模块存在。
Stage模型：
Stage模型是OpenHarmony系统演进后推出的新一代应用开发框架模型，更加面向现代化和组件化的设计理念。

Stage模型基本概念

在Stage模型中，对应用进行了更细粒度的拆分，将界面和逻辑解耦，强调了组件复用和灵活组合的概念。Stage模型引入了新的配置文件格式module.json5，并且在项目包结构、资源配置、上下文管理和生命周期管理等方面做了优化调整。

Stage模型支持动态加载和卸载功能模块，增强了应用的可扩展性和运行时灵活性。

如果开发者正在为最新的OpenHarmony版本编写新应用，或者需要利用最新的特性与最佳实践，建议采用Stage模型，因为它代表了OpenHarmony生态系统未来的发展方向，提供了更多的先进特性和更好的性能表现。

• UIAbility组件和ExtensionAbility组件

  Stage模型提供UIAbility和ExtensionAbility两种类型的组件，这两种组件都有具体的类承载，支持面向对象的开发方式。

  • UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。例如，图库类应用可以在UIAbility组件中展示图片瀑布流，在用户选择某个图片后，在新的页面中展示图片的详细内容。同时用户可以通过返回键返回到瀑布流页面。UIAbility的生命周期只包含创建/销毁/前台/后台等状态，与显示相关的状态通过WindowStage的事件暴露给开发者。

  • ExtensionAbility组件是一种面向特定场景的应用组件。

• WindowStage

  每个UIAbility类实例都会与一个WindowStage类实例绑定，该类提供了应用进程内窗口管理器的作用。它包含一个主窗口。也就是说UIAbility通过WindowStage持有了一个窗口，该窗口为ArkUI提供了绘制区域。

• Context

  在Stage模型上，Context及其派生类向开发者提供在运行期可以调用的各种能力。UIAbility组件和各种ExtensionAbility派生类都有各自不同的Context类，他们都继承自基类Context，但是各自又根据所属组件，提供不同的能力。

• AbilityStage

  每个Entry类型或者Feature类型的HAP在运行期都有一个AbilityStage类实例，当HAP中的代码首次被加载到进程中的时候，系统会先创建AbilityStage实例。每个在该HAP中定义的UIAbility类，在实例化后都会与该实例产生关联。开发者可以使用AbilityStage获取该HAP中UIAbility实例的运行时信息。

整体架构

• 声明式UI前端

  提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。

• 语言运行时

  选用方舟语言运行时，提供了针对UI范式语法的解析能力、跨语言调用支持的能力和TS语言高性能运行环境。

• 声明式UI后端引擎

  后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。

• 渲染引擎

  提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕的能力。

• 平台适配层

  提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。

开发流程

基于Stage模型开发应用时，在应用模型部分，涉及如下开发过程。

表1 Stage模型开发流程

构建第一个ArkTS应用（Stage模型）

构建一个鸿蒙应用，大体上分为四个步骤。第一步：创建应用工程。第二步：实现用户界面，第三步：完善功能逻辑，第四步：优化交互体验。

创建ArkTS工程

1. 若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
2. 选择Application应用开发（本文以应用开发为例，Atomic Service对应为元服务开发），选择模板“Empty Ability”，点击Next进行下一步配置。
3. 进入配置工程界面，Compile SDK选择“3.1.0(API 9)”，Model 选择“Stage”，其他参数保持默认设置即可。

ArkTS工程目录结构（Stage模型） 

• AppScope > app.json5：应用的全局配置信息。
• entry：HarmonyOS工程模块，编译构建生成一个HAP包。
  • src > main > ets：用于存放ArkTS源码。
  • src > main > ets > entryability：应用/服务的入口。
  • src > main > ets > pages：应用/服务包含的页面。
  • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
  • src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
  • build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
  • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
• oh_modules：用于存放三方库依赖信息。

• build-profile.json5：应用级配置信息，包括签名、产品配置等。

• hvigorfile.ts：应用级编译构建任务脚本。

构建第一个页面

工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Text组件组成。“Index.ets”文件的示例如下：

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

事件响应和页面跳转

1.创建第二个页面

• 新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets ”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。

• 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

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

2.添加文本及按钮

参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“Second.ets”文件的示例如下：

// Second.ets
@Entry
@Component
struct Second {
  @State message: string = 'Hi there'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

第一个页面跳转到第二个页面。

在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“Index.ets”文件的示例如下：

低代码开发方式

最后介绍下UI界面的低代码开发方式，也是支持的。除了可以手工编写UI布局外，还支持使用ArkTS低代码开发方式。（熟练的还是直接编辑来的快，但喜欢的可以尝试下）

低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。

 

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注博主，同时可以期待后续文章ing
  声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/83230