【OpenHarmony】ArkTS 语法基础 ① ( ArkTS 语言简介 | ArkTS 与 TypeScript / JavaScript 兼容性 | 装饰器 | UI 描述

文章目录

一、arkts 简介
- 1、arkts 语言简介
- 2、arkts 与 typescript / javascript 语法兼容性
二、装饰器 / ui 描述 / 内置组件

在这里插入图片描述

参考文档 : <harmonyos第一课>arkts开发语言介绍

一、arkts 简介

1、arkts 语言简介

arkts 语言是华为开发的一种语言 , 在 typescript 语言的基础上 , 增加了

声明式 ui
状态管理

等能力 , 可以快速开发 openharmony 和 harmonyos 应用 ;

arkts 语言实际上是一种前端语言 , 其作用类似于 flutter 的 dart 语言 , 使用方式也极其类似 ;

arkts 语言提供了一套声明式 ui 描述规范 , 可以直观的描述 ui 界面 ,

2、arkts 与 typescript / javascript 语法兼容性

在这里插入图片描述

arkts 语言是 typescript 语言的拓展 , 兼容 typescript 语法 ;

typescript 语言与 javascript 语言不兼容 : 虽然 typescript 是 javascript 的拓展 , 但是二者语法不通 , typescript 的变量 , 函数形参 / 返回值都要注明类型 , 因此 typescript 代码在 javascript 脚本中会在编译时报错 , 无法在 js 引擎中运行 , 必须先翻译成 js 语言 , 然后才能运行在 js 引擎中 ;

arkts 代码中 , 可以使用 typescript 语法 , 但是不能使用 javascript 语法 ;

二、装饰器 / ui 描述 / 内置组件

下面的代码中 , 就是 typescript 代码 , 加上了 @entry / @component / @state 等装饰器 , 在 build() ui 描述中构建 ui 组件 ;

@entry
@component
struct index {
  @state message: string = 'hello world';

  build() {
    row() {
      column() {
        text(this.message)
          .fontsize(50)
          .fontweight(fontweight.bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

1、装饰器概念 ( 注解 )

在 arkts 中 , " 装饰器 " 是一种语言特性 , 用于装饰类 / 结构 / 方法 / 变量 , 可以赋予被装饰的代码元素指定的功能 ;

arkts 装饰器与 java 注解的用法和作用及其类似 , 可以理解为注解 ;

" 装饰器 " 本质是函数 , 在代码加载的阶段执行 , 用于给被装饰的代码元素 ( 类 / 结构 / 方法 / 变量 ) 增加功能 ;

2、常用的装饰器

arkts 装饰器以 @ 开头 , 常用的装饰器如下所示 :

@entry 装饰器 : 将自定义组件标记为入口组件 , 被装饰的组件就是一个独立的页面 , 在一个页面中只能有一个入口组件被该装饰器装饰 ;
@component : 标记自定义组件 struct 结构体 , 一个 @entry 入口组件由若干自定义组件构成 ;
- @component 自定义组件是可重用的 ui 单元组件 ;
@state : 标记状态变量 , 当该状态变量发生变化时 , 会刷新与该变量绑定的 ui 组件 ;

下面的代码中 , 就使用了上述 3 种装饰器 ;

@entry
@component
struct index {
  @state message: string = 'hello world';
}

3、ui 描述

在 struct 结构体中的 build() {} 函数 , 就是 ui 描述 ;

" ui 描述 " 以声明的方式 , 描述该 @component 自定义组件的 ui 结构 ;

在 struct 结构体的 build 函数中的内容 , 就是描述多个布局组件如何组合成一个自定义组件 , 代码如下 :

  build() {
    row() {
      column() {
        text(this.message)
          .fontsize(50)
          .fontweight(fontweight.bold)
      }
      .width('100%')
    }
    .height('100%')
  }

4、内置组件

openharmony 和 harmonyos 的 sdk 中 , 自带了华为官方定义好的内置组件 , 这些组件的本质就是 @component 自定义组件 ,

这些组件是系统提供 , 可直接使用的组件 ;

如 : 在 ui 描述 build 方法中 , 使用的 row 行组件 , column 列组件 , text 文本组件 ; 通过设置这些组件的属性 , 调整组件的位置 , 显示样式 , 组件大小等属性 ;

    row() {
      column() {
        text(this.message)
          .fontsize(50)
          .fontweight(fontweight.bold)
      }
      .width('100%')
    }
    .height('100%')