二、ArkTS 快速入门

Harry技术
67 阅读5分钟

ArkTS 语言：developer.huawei.com/consumer/cn…

image-20241206115021887

ArkTS是鸿蒙生态的应用开发语言。ArkTS提供了声明式UI范式、状态管理支持等相应的能力，让开发者可以以更简洁、更自然的方式开发应用。同时，它在保持TypeScript（简称TS）基本语法风格的基础上，进一步通过规范强化静态检查和分析，使得在程序运行之前的开发期能检测更多错误，提升代码健壮性，并实现更好的运行性能。

针对JavaScript（简称JS）/TS并发能力支持有限的问题，ArkTS对并发编程API和能力进行了增强。

ArkTS支持与JS/TS高效互操作，兼容JS/TS生态。

image-20241206115238806

未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性

ArkTS 快速入门

ArkTS 在继承了Typescript语法的基础上，主要扩展了声明式UI开发相关的能力。

声明式UI

声明式UI是一种编写用户界面的范式。如下图所示，当开发者点击按钮时，文本内容从“Hello World”变为“Hello ArkUI”。

示例效果图

@Entry
@Component
struct HelloPage {
  @State myText: string = 'World';
​
  build() {
    RelativeContainer() {
      Column() {
        Text(`Hello ${this.myText}`)
          .fontSize(50)
        Divider()
        Button('Click me').onClick(() => {
          this.myText = 'ArkUI'
        })
          .height(50)
          .width(100)
          .margin({ top: 20 })
      }
    }
    .height('100%')
    .width('100%')
  }
}

完整代码见: src/main/ets/pages/HelloPage.ets

ArkTS的基本组成

img

说明

自定义变量不能与基础通用属性/事件名重复。

  • 装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
  • UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
  • 自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
  • 系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
  • 属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
  • 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。
  • 系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。

除此之外，ArkTS扩展了多种语法范式来使开发更加便捷：

  • @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
  • @Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件。
  • stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

@State

  • 声明式描述

开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。

  • 状态数据驱动界面更新

开发者只需修改状态变量的值，界面就会自动更新。

img

声明组件

  • 组件参数

如果组件的定义包含参数，可在组件名称后面的()中配置相应参数。各组件支持的参数，可查看 API 文档，查看方式如下

  • 首先将鼠标在相应组件悬停

首先将鼠标在相应组件悬停

  • 点击Show in API Reference，就会弹出 API 文档

image-20241206111720493

  • 子组件

如果组件支持子组件配置，可在()后的{}中添加子组件，若不支持子组件，则不需要写{}。

  • 属性方法

属性方法用于配置组件的样式和其他属性，可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档，除去每个组件的专有属性，还有各组件都能配置的通用属性，通用属性也可通过 API 文档查看。

image-20241206112537740

  • 事件方法

事件方法用于为组件绑定交互事件，可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档，除去每个组件的专有事件，还有各组件都支持的通用事件，通用事件也可通过 API 文档查看。

image-20241206112523086

自定义组件

除去系统预置的组件外，ArkTS 还支持自定义组件。使用自定义组件，可使代码的结构更加清晰，并且能提高代码的复用性。

语法说明

自定义组件的语法如下图所示

img

各部分语法说明如下：

  • **struct**关键字

struct是ArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似，可包含属性和方法。

  • **build**方法

build()方法用于声明自定义组件的UI结构。

  • 组件属性

组件属性可用作自定义组件的参数，使得自定义组件更为通用。

  • **@Compnent**装饰器

@Component装饰器用于装饰struct关键字声明的数据结构。struct被@Component装饰后才具备组件化的能力。

注： 装饰器是Typescript中的一种特殊语法，常用于装饰类、方法、属性，用于修改或扩展其原有的行为。

在学完自定义组件的语法之后，我们会发现前文案例中的每个页面实际上都是一个自定义组件。但是和自定义组件的语法相比，前边的每个案例还会多出一个@Entry装饰器，那@Entry的作用又是啥呢？

在鸿蒙应用中，每个页面都是由一些列组件组合而成的，并且这些组件都是逐层嵌套的，因此这些组件最终形成了一个组件树的结构。

每个页面就相当于是组件树的根节点，而@Entry装饰器的作用就是标识该组件为组件树的根节点，也就是一个页面的入口组件。 @Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。

关注我,公众号搜“Harry技术”带你看不一样的人间烟火！

avatar
文章
阅读
粉丝