从实现第一个ArkTs应用开始入门

前言

• 新建了个鸿蒙学习项目，后续持续学习会把代码放到这里来：鸿蒙项目仓库·学习实践版

基本概念

• 从HarmonyOS NEXT Developer Preview1(API 11)版本开始，HarmonyOS SDK以Kit维度提供了六大领域的开放能力， 包括：
  应用框架（Ability Kit(程序框架服务)、ArkUI（方舟UI框架））、系统、没提、图形、应用服务、AI。而我们移动端，主要需要掌握的是应用框架领域，ArkUI。
• ArkUI即是HarmonyOS的UI开发框架，是我们移动端开发需要掌握的。
  • 基于ArkTS的声明式开发范式。
  • 其基于语言生态：ArkTS语言。
  • 其基于的应用模型：Stage模型。

项目工程结构简介

解释：

AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。
entry：HarmonyOS工程模块，编译构建生成一个HAP包。
src > main > ets：用于存放ArkTS源码。
src > main > ets > entryability：应用/服务的入口。
src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
src > main > ets > pages：应用/服务包含的页面。
src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
hvigorfile.ts：模块级编译构建任务脚本。
obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
oh_modules：用于存放三方库依赖信息。
build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。

hvigorfile.ts：工程级编译构建任务脚本。

oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

创建项目

默认页面代码 + 跳转按钮逻辑

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold);
        Button("jump to the second page")
          .onClick(()=>{
            router.pushUrl({
              url: "pages/SecondPage"
            })
          });
      }
      .width('100%')
    }
    .height('100%')
  }
}

待跳转的页面代码

@Entry
@Component
struct SecondPage {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

项目代码、代码页面效果