HelloHarmony项目入门

望佑
113 阅读4分钟

一、项目架构

OpenHarmony应用项目架构

OpenHarmony应用项目遵循模块化的架构设计原则，其中各个模块负责不同的功能和职责。对于HelloHarmony这样的基础项目，虽然结构相对简单，但同样遵循模块化设计，确保代码的可维护性和可扩展性。

二、目录功能和作用

项目目录结构

  • entry

    • 应用的主入口目录，包含所有核心代码和资源。
      • src
        • 源代码目录，存放ArkTS（Ark TypeScript）框架下的.ets文件、CSS样式文件及JavaScript/TypeScript逻辑代码。
          • main
            • 主要的开发目录，包含应用的逻辑和界面代码。
              • ets
                • 存放ArkTS框架的页面和组件定义文件（.ets），这些文件定义了应用的UI界面。
                  • pages
                    • 页面目录，包含应用的各个页面定义，如Index.ets代表应用的主界面。
              • js（可选）
                • 如果项目使用纯JavaScript而非TypeScript，则逻辑代码将存放在此目录。但在ArkTS项目中，逻辑与界面通常在.ets文件中统一定义。
          • assets（可选）
            • 存放项目所需的图片、音频、视频等静态资源文件。
      • resources（可选）
        • 资源目录，用于国际化资源、配置文件等的存放。
      • libs（可选）
        • 存放项目依赖的第三方库文件。

  • config.json

    • 应用配置文件，定义应用的基本信息，如名称、图标、版本、所需权限等。

  • BUILD.gn（或类似构建配置文件）

    • 构建配置文件，定义项目的构建规则、依赖关系等。在OpenHarmony项目中，通常使用BUILD.gn而非build.gradle。

三、编译运行方式

编译与运行流程

  1. 编译

    • 在DevEco Studio中，通过点击运行按钮或执行构建命令启动编译过程。
    • 编译过程中，DevEco Studio使用OpenHarmony SDK的编译器和工具链，将.ets、.js、.css等文件转换为OpenHarmony系统可理解的格式，并生成必要的资源文件和配置文件，最终打包成HAP（Harmony Ability Package）文件。

  2. 运行

    • 编译完成后，DevEco Studio将HAP包部署到指定的目标设备（如虚拟设备或真实OpenHarmony设备）。
    • 部署过程中，IDE与目标设备建立连接，传输HAP包，并在设备上启动应用，展示应用界面。
    • 在HelloHarmony项目中，成功运行后将在目标设备上显示“Hello Harmony”等文本。

  3. 调试

    • DevEco Studio提供调试功能，支持日志查看、变量监视、断点调试等。
    • 通过设置断点、观察变量变化等方式，开发者可以定位和解决应用中的问题。
    • 利用性能分析工具评估应用性能，并进行优化。

四、Harmony开发语言基础及示例

ArkTS基础介绍

ArkTS是HarmonyOS应用开发的主要语言，基于TypeScript扩展，保留了TypeScript的基本语法特性，并引入了静态类型等更严格的约束。ArkTS支持声明式UI、状态管理等特性，简化开发过程。

核心特性：

  1. 基本语法：继承自TypeScript的所有特性，如类型定义、函数、类等。
  2. 声明式UI：允许开发者通过声明式的方式描述UI界面，而无需直接操作DOM。
  3. 状态管理：支持组件状态、组件数据共享、应用数据共享、设备共享等。
  4. 渲染控制：包括条件渲染、循环渲染、数据懒加载等。

示例代码

// ArkTS组件示例：定义一个按钮并处理点击事件
@Component
struct MyButton {
  @State private buttonText: string = '点击我'

  build() {
    // 使用Button组件并绑定点击事件
    Button({ type: ButtonType.Capsule })
      .text(this.buttonText)
      .onClick(() => {
        // 处理点击事件，改变按钮文本
        this.buttonText = '已点击'
      })
  }
}

// 页面入口
@Entry
@Component
struct MyPage {
  build() {
    // 页面布局，这里只放置了一个MyButton组件
    Column() {
      MyButton()
    }
  }
}

五、页面构建基础及示例

ArkUI基础介绍

ArkUI是HarmonyOS的UI开发框架，支持类Web和声明式两种开发范式，提供丰富的UI组件和布局方式，帮助开发者构建跨设备的高性能应用界面。

核心组件：

  1. 布局组件：如Column（列布局）、Row（行布局）、Flex（弹性布局）等，用于组织页面中的元素。
  2. UI组件：如Button（按钮）、Text（文本）、Image（图片）等，用于构建用户界面的基本元素。

页面构建示例

虽然ArkUI通常使用.ets文件进行页面和组件的声明式开发，但以下示例采用HML（Harmony Markup Language）和CSS来模拟ArkUI的基本页面构建方式：

<!-- HML页面布局示例 -->
<div class="container">
  <text class="title">欢迎来到HarmonyOS世界</text>
  <button class="my-button" onclick="handleClick">点击我</button>
</div>

/* CSS样式示例 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.my-button {
  /* 样式定义 */
}

// 假设的JavaScript处理函数（实际应使用ArkTS）
function handleClick() {
  console.log('按钮被点击了');
}

注意：实际开发中，应使用ArkTS和ArkUI提供的.ets文件来定义页面和组件，上述HML和CSS示例仅用于说明页面构建的基本概念。

avatar
文章
阅读
粉丝