鸿蒙操作系统（HarmonyOS）开发的初学者了解和入门

最新推荐文章于 2024-12-06 00:48:12 发布

yuwinter

最新推荐文章于 2024-12-06 00:48:12 发布

阅读量1.8k

点赞数 29

分类专栏： HarmonyOS 文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/yuwinter/article/details/143964720

版权

HarmonyOS 专栏收录该内容

14 篇文章

订阅专栏

1. 什么是鸿蒙操作系统（HarmonyOS）

鸿蒙操作系统是华为开发的一种分布式操作系统，面向多种设备（如智能手机、智能家居设备、穿戴设备、车机等）。它的特点包括：

分布式架构：支持跨设备无缝协作。
开发一次，多端部署。
高性能：低时延和高吞吐率。
安全性：微内核架构更注重系统安全。

2. ArkTS 简介

ArkTS 是一种面向现代 UI 开发的语言，基于 TypeScript 语法扩展，专为构建 HarmonyOS 应用设计。它提供更高效的开发体验，包括：

强类型系统和语法检查。
简洁的 UI 声明式编程。
与分布式能力的深度集成。

3. 开发准备

在开始之前，确保开发环境符合以下条件：

(1) 硬件要求

操作系统：Windows 10（64 位）、macOS（10.15 或更高）、Linux（Ubuntu 20.04 或更高）。
内存：至少 8GB（建议 16GB 或更高）。
磁盘空间：50GB 可用空间。
CPU：支持 64 位的多核处理器。

(2) 真机调试

具备支持鸿蒙系统的设备（如华为手机、平板）。
开启设备的 开发者模式 和 USB 调试：
1. 进入设备的 设置 > 关于手机，连续点击 版本号 进入开发者模式。
2. 在 开发者选项 中开启 USB 调试 和 允许 ADB 调试。

(3) 安装 DevEco Studio

DevEco Studio 是官方提供的开发环境，基于 IntelliJ IDEA，支持 HarmonyOS 应用开发。

下载地址：DevEco Studio 官方下载页面
安装步骤：
1. 下载适合操作系统的版本。
2. 按提示完成安装。
3. 启动 DevEco Studio，并登录您的 华为开发者账号。

(4) 安装 JDK

ArkTS 项目需要 JDK 环境支持：
- 推荐使用 JDK 11 或 JDK 8。
- 下载地址：Oracle JDK 下载

(5) 安装 HarmonyOS SDK

打开 DevEco Studio。
点击 Tools > SDK Manager。
在 SDK Platforms 中选择目标 API（如 API 9 或 API 10）。
点击 Apply 下载并安装所需的工具包。

(6) 创建签名文件

签名文件用于真机调试和发布应用。

打开 DevEco Studio。
点击 Build > Generate Signed APK。
创建或导入现有签名文件（.jks 文件）。

(7) 配置设备

使用 USB 数据线连接开发设备。
在 DevEco Studio 中，打开 Device Manager，确保设备状态为 Online。
如果设备未连接成功，请检查以下内容：
- 安装了设备驱动程序（Windows）。
- 开启了 开发者模式 和 USB 调试。

(8) 注册华为开发者账号

前往华为开发者官网。
注册并完成 个人或企业开发者认证。
认证后，您可以获取更多开发资源（如 API Key 和签名文件）。

4.创建第一个鸿蒙ArkTS 应用

(1) 创建项目

打开 DevEco Studio。
点击 File > New > HarmonyOS Project。
选择模板：Empty Ability（ArkTS）。
输入项目名称，选择设备类型（手机、智能家居等）。

(2) 项目结构

pages：存放页面文件（.ets）。
app.ets：应用的入口文件。
resources：存放图片、字符串等资源文件。
manifest.json：应用的全局配置文件。

5. ArkTS 基础示例

(1) 创建 UI 界面

在 pages/index.ets 中编写简单的界面代码：

// pages/index.ets
@Entry
@Component
struct IndexPage {
  build() {
    Column() {
      Text("Hello, HarmonyOS!")
        .fontSize(24)
        .fontColor(Color.Black)
        .padding(16)
      Button("Click Me")
        .onClick(() => {
          console.log("Button clicked!");
        })
    }
  }
}

(2) 运行项目

在 DevEco Studio 中启动模拟器或连接真机。
点击 Run 按钮运行应用。
观察设备上显示的 Hello, HarmonyOS! 和按钮。

6. 关键概念

(1) 组件（Component）

ArkTS 中的每个 UI 元素都是一个组件。
组件分为：
- 基础组件：如 Text、Button、Image 等。
- 容器组件：如 Column、Row、Stack 等。

(2) 装饰器

@Entry：定义页面的入口。
@Component：声明一个组件。

(3) 布局管理

使用容器组件控制元素的排列方式：

Column() {
  Text("Item 1")
  Text("Item 2")
}

(4) 状态管理

使用 @State 声明动态变量：

@Entry
@Component
struct CounterPage {
  @State count: number = 0;

  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(20)
      Button("Increment")
        .onClick(() => {
          this.count++;
        })
    }
  }
}

7. 项目配置

(1) manifest.json

定义应用信息和权限：

{
  "app": {
    "bundleName": "com.example.arktsapp",
    "version": {
      "name": "1.0.0",
      "code": 1
    }
  },
  "deviceConfig": {
    "default": true
  },
  "module": {
    "abilities": [
      {
        "name": "MainAbility",
        "type": "page",
        "launchType": "standard",
        "orientation": "unspecified"
      }
    ]
  }
}

(2) 路由配置

在 app.ets 中定义路由：

@Entry
@Component
struct App {
  build() {
    Router.push({ url: 'pages/index' })
  }
}

8. 高级开发

(1) 分布式特性

实现多设备协作：

// 简单示例：发送消息到其他设备
import distributedData from '@ohos.data.distributedData';

let kvStore = distributedData.createKVStoreSync({
  bundleName: 'com.example',
  storeId: 'testStore',
});

kvStore.put('key', 'value', (err) => {
  if (!err) {
    console.log('Data saved successfully');
  }
});

(2) 自定义组件

创建可复用的组件：

@Component
struct CustomButton {
  @Prop label: string;

  build() {
    Button(this.label)
      .fontSize(18)
      .padding(12)
      .backgroundColor(Color.Blue)
      .onClick(() => {
        console.log(`${this.label} clicked`);
      })
  }
}

(3) 动画

为组件添加动画效果：

@Entry
@Component
struct AnimationExample {
  @State opacity: number = 1.0;

  build() {
    Column() {
      Text("Fading Text")
        .opacity(this.opacity)
      Button("Fade Out")
        .onClick(() => {
          this.opacity -= 0.1;
        })
    }
  }
}