你好 ArkTS

乾坤初翻转鸿蒙才开始
到底什么才是鸿蒙开发 ?
这写的都是什么东西 ?
我怎么一个也看不懂 ?

  • ArkTS 是鸿蒙开发的主力语言，是 HarmonyOS 开发最优选的开发语言
  • ArkTS 是基于 TypeScript（ 简称 TS ）扩展而来，也可以说是 TS 的超集

ArkTS

一、ArkTS 介绍

1. 历史进程

  • 最早的 Mozilla 创造了 JS

  • 后来的 Microsoft 创建了 TS

    在原本类型限制不严谨的 JS 语言基础上
    增加了类型系统声明
    让我们避免了很多开发过程中可能出现的类型错误导致的项目运行出错
    提高了开发效率和维护行以及代码的严谨性

  • 今天 HuaWei 推出了 ArkTS（ Ark ： 方舟 ）

    在 TS 的基础上扩展了声明式 UI 状态管理的能力
    提供了更加简洁、清晰的开发方式
    引入了渲染引擎的增强，包括平台无关的自绘制机制、声明式 UI 后端设计、动态布局等，以提高性能体验。
    TYPESCRIPTJAVASCRIPT 声明式 U 声明文件状态管理 ARKTS 类型系统

2. 介绍

  • 起源

    JavaScript（JS）是由 Mozilla 创建，最初用于解决网页逻辑交互问题，成为 Web 开发的基础。
    TypeScript（TS）是由 Microsoft 创建的，旨在增强 JS，引入类型系统、类型检查等，提高大型应用程序的可维护性。
    React.js 和 Vue.js 等前端框架引入了声明式 UI 和响应式编程的概念，使 Web 应用程序更容易开发和维护。

  • TypeScript（TS）演化

    TS 引入了类型系统和类型检查，提高了代码的可维护性和错误检测范围。
    声明文件（Declaration Files）支持了接口和自定义类型的管理，增强了模块之间的协作和复用。
    TS 提供了编辑器、编译器和 IDE 插件等工具，提高了开发效率。
    TS 兼容 ECMA 标准，使 TS 应用能够编译成纯 JS 应用，并在标准 JS 引擎上运行。

  • ArkTS 演化

    ArkTS 建立在 JS 和 TS 的基础之上，扩展了声明式 UI 开发范式和状态管理，提供更简洁和自然的开发方式。
    ArkTS 引入了渲染引擎的增强，包括平台无关的自绘制机制、声明式 UI 后端设计、动态布局等，以提高性能体验。
    进一步的优化包括代码预编译、高效 FFI-Foreign Function Interface、引擎极小化等。
    ArkTS 还构建了跨 OS 平台的基础设施，以支持不同设备上的部署。

  • 优点和创新

    ArkTS 整合了 JS 和 TS 的生态，使开发者能够使用熟悉的语言和工具。
    基于 ArkTS 的声明式 UI 开发范式提供了更简洁、自然和高性能的开发体验。
    渲染引擎和运行时的优化进一步提高了性能体验，使应用程序能够在不同设备上运行。

二、ArkTS 的组成部分

  • ArkTS 的组成部分包含以下几个方面
    • 装饰器
    • 自定义组件
    • UI 描述
    • 系统组件
    • 事件方法
    • 属性方法
  • 接下来我们逐个介绍一下每一个组成部分

1. 装饰器

  • 用于装饰类、结构、方法以及变量、并赋予其特殊书的含义的就是装饰器。

  • 比如，我们在代码中写的

    • @Entry（ 定义入口 ）
    • @Pomponent（ 定义组件 ）
    • @State（ 定义变量 ）

    这里的 @Component 装饰器的作用是修饰当前 struct 是一个组件

    这里的 @Entry 装饰器的作用是修饰当前 struct 是一个入口组件

    这里的 @State 装饰器的作用是表示组装件重的状态变量（ 一旦该变量修改，会引起 UI 变成 ）

  • 除了这些以外，后面我们还会接触到其他的很多装饰器

2. 自定义组件

  • 可复用的 UI 单元，可以组合其他组件
  • 比如我们上面写的 struct Index 组件
  • 因为被 @Component 修饰过，所以就构成了一个组件
  • 我们可以在其他组件内进行复用

  • 我们定义一个组件的方式

    1
    2
    @component
    struct MyIndex {}

3. UI 描述

  • 声明式的方式来描述 UI 的结构，如 build() 方法内部的代码块。
  • 利用系统组件中提供的组件 和 代码的方式 来描述一段 UI 结构。

4. 系统组件

  • ArkUI 框架中默认内置的基础和容器组件，可直接被开发者调用，例如 Column、Text、Divider、Button 等内容。

5. 属性方法

  • 组件可以通过链式调用配置多项属性，例如： fontSzie() / width() / height() / backgroundColor()

比如上图这一段代码
使用了一个 Text() 组件，也就是文本展示组件
文本的内容是 this.message 这个变量存储的内容
fontSize() 属性方法修饰了这段文本的 “文字大小” 为 “50vp”
fontWeight() 属性方法修饰了这段文本为 “加粗” 展示

6. 事件方法

  • 组件可以通过链式调用设置多个事件的响应逻辑，如跟随 Button 后的 onClick()
1
2
3
4
5
6
7
8
9
10
@component
struct MyIndex {
  build () {
    Row () {
      Column () {
        Button().onClick(function () { /* ... */ })
      }
    }
  }
}

7. 回看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Entry // 修饰当前 Index 为一个入口组件
@Component // 修饰当前 Index 为一个组件
struct Index {
  // 根据 ArkTS 的语法规则，定义了一个响应式变量 message
  // 根据 TS 的语法规则，确定变量的存储类型位 string
  // 根据 JS 的语法规则，给 message 变量初始化赋值为 'Hello World'
  @State message: string = 'Hello World'


  build() {
    // 一个 行 组件（ 删格布局 ）
    Row() {
      // 一个 列 组件（ 删格布局 ）
      Column() {
        // 一个 文本 组件
        Text(this.message) // 文本内容为 message 变量的值
          .fontSize(50) // 属性方法修饰文本大小为 50vp
          .fontWeight(FontWeight.Bold) // 属性方法修饰文本 加粗
      }
      .width('100%') // 属性方法描述 列 组件宽度为 100%
    }
    .height('100%') // 属性方法描述 行 组件高度为 100%
  }
}

此时再来回看这段代码，请你仔细思考其中的每一个细节点
其实就是把我们最原始的 html + css 都放在 js 代码内完成了
这里的删格布局其实就是 ArkTS 组成部分中的 UI 描述
用到的 Row() / Column() / Text() 其实就是 ArkTS 组成部分中的 系统组件
书写的 width() / height() / fontSIze() / fontWeight() 其实就是 ArkTS 组成部分中的 属性方法
并且用了 @Entry 和 @Component 装饰器把 struct Index 修饰成了一个入口组件，同时也是一个自定义组件