🔥 热搜 🔥
百度今日热点微信公众平台贴吧opggdnf私服百度贴吧知乎dnf公益服百度傻逼
分类
社会娱乐国际人权科技经济其它
🔥 热搜 🔥
上海习近平新疆鄂州父女瓜乌鲁木齐疫情H工口小学生赛高习明泽芊川一笑图包印尼排华
分类
社会娱乐国际人权科技经济其它
查看原文
其他

ArkTS 入门指南：快速上手鸿蒙应用开发

鸿洋
2024-08-24

The following article is from 陆业聪 Author 陆业聪

ArkTS 是一种基于 TypeScript 的编程语言，专为鸿蒙应用开发而设计。本文将为读者介绍 ArkTS 的基本概念和入门技巧，帮助读者快速上手鸿蒙应用开发。

1ArkTS 简介

ArkTS 是基于 TypeScript 的一种编程语言，主要用于鸿蒙应用的 UI 界面和业务逻辑开发。TypeScript 是一种 JavaScript 的超集，为开发大型应用添加了类型检查和其他特性，如类、接口、模块等。ArkTS 在 TypeScript 的基础上，进行了一些针对鸿蒙系统的优化和定制。
ArkTS 的主要优点包括：
  1. 静态类型检查：ArkTS 在编译时进行类型检查，可以在代码运行前发现和修复错误。
  2. 更好的 IDE 支持：由于有了类型信息，IDE 可以提供更好的自动完成、导航和重构功能。

  3. 更易于维护和理解：类型注解和编译时检查使得代码更易于理解和维护。

2创建 ArkTS 项目

在搭建好开发环境后，可以开始创建 ArkTS 项目。以下是创建 ArkTS 项目的基本步骤：
  1. 打开 DevEco Studio，点击 File -> New -> Project，选择适合的模板作为项目类型。


  1. 输入项目名称、包名等信息，然后点击 Next。

  2. 点击 Finish，DevEco Studio 将自动创建一个 ArkTS 项目。

3鸿蒙工程的基本结构

├── AppScope
│   ├── app.json5
│   └── resources
│       └── base
│           ├── element
│           │   └── string.json
│           └── media
│               └── app_icon.png
├── build-profile.json5
├── entry
│   ├── build-profile.json5
│   ├── hvigorfile.ts
│   ├── obfuscation-rules.txt
│   ├── oh-package.json5
│   └── src
│       ├── main
│       │   ├── ets
│       │   │   ├── entryability
│       │   │   │   └── EntryAbility.ets
│       │   │   └── pages
│       │   │       └── Index.ets
│       │   ├── module.json5
│       │   └── resources
│       │       ├── base
│       │       │   ├── element
│       │       │   │   ├── color.json
│       │       │   │   └── string.json
│       │       │   ├── media
│       │       │   │   ├── background.png
│       │       │   │   ├── foreground.png
│       │       │   │   ├── layered_image.json
│       │       │   │   └── startIcon.png
│       │       │   └── profile
│       │       │       └── main_pages.json
│       │       ├── en_US
│       │       │   └── element
│       │       │       └── string.json
│       │       ├── rawfile
│       │       └── zh_CN
│       │           └── element
│       │               └── string.json
│       ├── mock
│       │   └── mock-config.json5
│       ├── ohosTest
│       │   ├── ets
│       │   │   ├── test
│       │   │   │   ├── Ability.test.ets
│       │   │   │   └── List.test.ets
│       │   │   ├── testability
│       │   │   │   ├── TestAbility.ets
│       │   │   │   └── pages
│       │   │   │       └── Index.ets
│       │   │   └── testrunner
│       │   │       └── OpenHarmonyTestRunner.ets
│       │   ├── module.json5
│       │   └── resources
│       │       └── base
│       │           ├── element
│       │           │   ├── color.json
│       │           │   └── string.json
│       │           ├── media
│       │           │   └── icon.png
│       │           └── profile
│       │               └── test_pages.json
│       └── test
│           ├── List.test.ets
│           └── LocalUnit.test.ets
├── hvigor
│   └── hvigor-config.json5
├── hvigorfile.ts
├── local.properties
├── oh-package-lock.json5
├── oh-package.json5
└── oh_modules


鸿蒙工程的基本结构主要包括以下部分：
1. AppScope：这是应用的全局范围，包含全局配置文件app.json5和全局资源目录resources。resources目录下的base目录包含了全局的元素和媒体资源。
2. build-profile.json5：这是构建配置文件，包含了构建过程中需要的各种配置信息。
3. entry：这是应用的入口模块，包含了入口模块的配置文件build-profile.json5、hvigorfile.ts、obfuscation-rules.txt和oh-package.json5，以及源代码目录src。src目录下包含了入口模块的主要代码和资源。
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}


运行效果如下：

4. src/main：这是入口模块的主要代码和资源目录，包含了元素模板（ETS）文件、模块配置文件module.json5和资源目录resources。
5. src/main/ets：这是元素模板（ETS）文件目录，包含了应用的主要页面和服务的代码。
6. src/main/resources：这是资源目录，包含了应用的颜色、字符串、媒体文件和配置文件等资源。
7. hvigor：这是Hvigor工具的配置目录，包含了Hvigor工具的配置文件hvigor-config.json5。
8. hvigorfile.ts：这是Hvigor工具的配置文件。
9. local.properties：这是本地属性文件，包含了本地环境的配置信息。
10. oh-package-lock.json5和oh-package.json5：这是包管理器的配置文件，包含了应用的依赖信息。
11. oh_modules：这是包管理器安装的模块目录。

鸿蒙工程的结构比较清晰，每个目录和文件都有明确的用途，这有助于开发者更好地理解和管理项目。

4ArkTS 关键语法和使用示例

下面我们将介绍一些 ArkTS 的关键语法特性，并通过实际的使用示例来帮助读者更好地理解和掌握这些特性。

1. 类型注解

类型注解是 TypeScript 的核心特性之一，它允许在变量、函数参数和函数返回值上添加类型信息。这有助于在编译时发现和修复类型错误。
示例：
let message: string = "Hello, HarmonyOS";
let count: number = 10;

function greet(name: string): string {
  return `Hello, ${name}`;
}

let greeting: string = greet("HarmonyOS");


2. 接口

接口是 TypeScript 中定义复杂类型的一种方式，它可以描述一个对象的结构。接口可以用于类型检查，确保对象符合预期的结构。
示例：
interface Person {
  name: string;
  age: number;
}

function showPersonInfo(person: Person) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

let person: Person = { name: "John", age: 30 };
showPersonInfo(person);


3. 类

类是 TypeScript 中实现面向对象编程的基本构造。类可以包含属性、方法、构造函数和访问修饰符等特性。
示例：
class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

let animal = new Animal("Dog");
animal.speak();


4. 继承

TypeScript 支持类之间的继承，子类可以继承父类的属性和方法，并可以覆盖或扩展它们。
示例：
class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.


5. 泛型

泛型是 TypeScript 中实现可重用代码的一种方式，它允许在定义函数、接口和类时使用类型参数。这有助于编写灵活且类型安全的代码。
示例：
function identity<T>(arg: T): T {
  return arg;
}

let output1: string = identity<string>("myString");
let output2: number = identity<number>(10);


6. 模块

ArkTS 支持模块化编程，你可以把代码分割成多个模块，每个模块有自己的作用域，并通过导出（export）和导入（import）进行模块之间的交互。
示例：
// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export function subtract(x: number, y: number): number {
  return x - y;
}

// app.ts
import { add, subtract } from './math';

console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5


7. 异步编程

ArkTS 支持 Promise 和 async/await 语法，使得异步编程变得更加简洁明了。
示例：
async function fetchData(url: string): Promise<Data> {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));


8. 类型别名

类型别名允许你为现有类型创建一个新的名字。这对于创建复杂类型或提高代码可读性非常有用。
示例：
type Point = {
  x: number;
  y: number;
};

function drawPoint(point: Point): void {
  console.log(`Drawing point at (${point.x}, ${point.y})`);
}

let point: Point = { x: 10, y: 20 };
drawPoint(point);


9. 类型保护

类型保护是一种检查变量类型的方法，可以在编译时确保变量具有正确的类型。这对于处理联合类型或处理类型转换时非常有用。
示例：
type Shape = Circle | Square;

function getArea(shape: Shape): number {
  if (shape instanceof Circle) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}


10. 枚举

枚举是一种特殊的类型，它允许你为一组有限的值定义友好的名字。枚举在处理一组固定值时非常有用，如状态、颜色、方向等。
示例：
enum Direction {
  Up,
  Down,
  Left,
  Right,
}

function move(direction: Direction): void {
  console.log(`Moving in direction: ${Direction[direction]}`);
}

move(Direction.Up);


11. 映射类型

映射类型允许你根据现有类型创建新的类型，例如将一个对象的所有属性设置为只读或可选。这在处理现有类型时非常有用，可以避免创建重复的类型定义。
示例：
type ReadonlyPoint = Readonly<Point>;

let readonlyPoint: ReadonlyPoint = { x: 10, y: 20 };
readonlyPoint.x = 30; // Error: Cannot assign to 'x' because it is a read-only property


为了更深入地学习 ArkTS，建议参考 鸿蒙开发者文档。
https://www.typescriptlang.org/docs/
https://developer.huawei.com/consumer/cn/

5结语


ArkTS 作为一种新的编程语言，为鸿蒙应用开发带来了许多新的可能性和机会。无论你是一名经验丰富的开发者，还是一名初学者，都可以通过学习和使用 ArkTS，参与到鸿蒙生态的建设中来。希望本文能为你的 ArkTS 学习和开发之旅提供帮助。


最后推荐一下我做的网站，玩Android: wanandroid.com ，包含详尽的知识体系、好用的工具，还有本公众号文章合集，欢迎体验和收藏！


推荐阅读：

Android特效视频Surface+Camera2的实现
包体积优化：Android编译期PNG自动化转换WEBP
Android 15 线程挂起超时崩溃与修复



扫一扫 关注我的公众号

如果你想要跟大家分享你的文章，欢迎投稿~


┏(＾0＾)┛明天见！

继续滑动看下一个
鸿洋
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题？点此查看未经处理的缓存