HarmonyOS开发(1):ArkTS的初步认识

ArkTS语言简介

ArkTS是鸿蒙生态的应用开发语言。基本语法风格与TypeScript(简称TS)相似,在TS的生态基础上进一步扩展,继承了TS的所有特性,是TS的超集。

扩展能力

基础语法:声明式语法、组件化机制、数据-UI自动关联。

scss 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.message = "你好,世界"
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

状态管理ArkTS提供了多维度的状态管理机制。比如数据传递可以在父子组件之间、爷孙组件之间,还可以应用全局范围传递或者跨设备传递。同时,数据的传递可以只单向传递可变更的双向传递

渲染控制条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。

ArkTS基本语法

ArkTS的基本组成

  • 装饰器 :装饰类、结构、方法以及变量。比如@Component自定义组件,@Entry自定义组件为入口组件,@State组件的状态变量,会触发UI刷新。
  • UI描述:声明式方式描述。

声明式UI描述

无参数和有参数组件:通过代码可以看得出来,组件后面"()"有没有配置内容,有就是有参,无则是无参。

scss 复制代码
Column() {//无参数
  Text('item 1')//有参数
  Divider()//无参数
  Text('item 2')
}

在有参数的组件配置参数格式如下:

  • Image组件的必须参数src
rust 复制代码
Image('https://xyz/test.jpg')
  • 应用资源采用$r形式引用
scss 复制代码
// string类型的参数
Text('test')
// $r形式引入应用资源,可应用于多语言场景
Text($r('app.string.title_value'))
// 无参数形式
Text()
  • 变量或者表达式也可以参数赋值,字符串变量嵌套采取${}
kotlin 复制代码
Image(this.imagePath)
Image('https://' + this.imageUrl)
Text(`count: ${this.count}`)

配置属性

属性方法以"."链式调用,比如fontSize(30)、width(this.width)、。具体有什么属性根据组件类型来判断,属性方法和其他语言的属性大同小异。

scss 复制代码
Text('hello')
  .fontSize(20)
  .fontColor(Color.Red)
  .fontWeight(FontWeight.Bold)

配置事件

事件方法以"."链式调用的方式配置系统组件支持的事件。

kotlin 复制代码
//箭头函数
Button('Click me')
  .onClick(() => {
    this.myText = 'ArkUI';
  })
  
//匿名函数表达式
Button('add counter')
  .onClick(function(){
    this.counter += 2;
  }.bind(this))//使用bind,以确保函数体中的this指向当前组件

//调用函数
myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

自定义组件

自定义组件的基本结构

less 复制代码
@Entry
@Component
struct MyComponent {
}
  • struct + 自定义组件名 + {...}的组合构成自定义组件,不能有继承关系
  • @Component仅装饰struct关键字声明的数据结构,一个struct只能被一个@Component装饰。
  • build()函数用于定义自定义组件的声明式UI描述。
  • @Entry装饰该自定义组件为UI页面的入口,@EntryUI页面的关系是一对一。

tips:自定义组件固定格式必有struct@Componentbuild()

成员函数/变量

成员函数:

  1. 不支持静态函数
  2. 成员函数的访问是私有的

成员变量:

  1. 不支持静态成员变量
  2. 成员变量都是私有的
  3. 成员变量的初始化可选可必选
less 复制代码
@Component
struct MyComponent {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
  }
}

@Entry
@Component
struct ParentComponent {
  private someColor: Color = Color.Pink;

  build() {
    Column() {
      // 创建MyComponent实例,并将创建MyComponent成员变量countDownFrom初始化为10,将成员变量color初始化为this.someColor
      MyComponent({ countDownFrom: 10, color: this.someColor })
    }
  }
}
相关推荐
Georgewu15 分钟前
【HarmonyOS】鸿蒙应用开发Text控件常见错误
harmonyos
Georgewu2 小时前
【HarmonyOS】富文本编辑器RichEditor详解
harmonyos
zhanshuo8 小时前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
万少12 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少1 天前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core1 天前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡1 天前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
jie_07541 天前
鸿蒙系统(HarmonyOS)4.2 设备上实现无线安装 APK 并调试
华为·harmonyos