HarmonyOS-ArkTS开发指南：从基础到实战

ArkTS作为TypeScript的超集，提供了完整的应用开发框架。文章系统介绍了ArkTS的核心功能，包括：基础语法（类型注解、接口、类）、声明式UI开发与组件化、多种状态管理方式（@State、@Link等）、完整生命周期钩子。重点讲解了布局系统（Flex/Grid/Stack）、样式设置、条件/列表渲染、异步操作和路由导航等关键开发技术。最后给出开发建议：使用DevEco Studio工具，

Sally璐璐

1085人浏览 · 2025-06-19 16:43:23

Sally璐璐 · 2025-06-19 16:43:23 发布

一、基础语法

ArkTS 是 TypeScript 的超集，所以支持所有 TypeScript 的特性，包括：

类型注解

let name: string = "张三";
let age: number = 25;
let isStudent: boolean = true;

接口

interface Student {
  id: number;
  name: string;
  score?: number;  // 可选属性
}

类

class Animal {
  constructor(public name: string) {}
  
  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

函数

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

二、声明式 UI 开发

ArkTS 采用声明式语法构建 UI，类似于 React 和 Vue 的 JSX。

基本组件结构

@Entry  // 应用入口组件
@Component  // 声明为自定义组件
struct MyComponent {
  @State count: number = 0;  // 响应式状态

  build() {  // 构建UI的方法
    Column() {  // 垂直布局容器
      Text(`Count: ${this.count}`)
        .fontSize(30)
        
      Button('Increment')
        .onClick(() => {
          this.count++;  // 状态变化会自动更新UI
        })
    }
    .width('100%')
    .height('100%')
  }
}

三、状态管理

ArkTS 提供多种状态管理方式：

@State - 组件内部状态

@State private isActive: boolean = false;

@Link - 父子组件双向绑定

// 父组件
@State parentValue: string = "初始值";

// 子组件
@Link childValue: string;

@Provide/@Consume - 跨组件状态共享

// 提供者
@Provide theme: string = "dark";

// 消费者
@Consume theme: string;

四、生命周期钩子

ArkTS 组件生命周期：

@Component
struct LifecycleDemo {
  aboutToAppear() {  // 组件即将显示
    console.log('组件即将挂载');
  }
  
  aboutToDisappear() {  // 组件即将销毁
    console.log('组件即将卸载');
  }
  
  onPageShow() {  // 页面显示
    console.log('页面显示');
  }
  
  onPageHide() {  // 页面隐藏
    console.log('页面隐藏');
  }
}

五、组件化开发

1. 创建自定义组件

@Component
struct CustomButton {
  @Prop label: string = "按钮";
  @State isPressed: boolean = false;
  
  build() {
    Button(this.label)
      .stateEffect(this.isPressed)
      .onClick(() => {
        this.isPressed = !this.isPressed;
      })
  }
}

2. 组件嵌套

@Component
struct Card {
  @Prop header: string;
  @Prop content: string;
  
  build() {
    Column() {
      Text(this.header).fontSize(20)
      Divider()
      Text(this.content)
    }
    .borderRadius(10)
    .padding(15)
  }
}

六、事件处理

ArkTS 支持多种事件类型：

Button('交互按钮')
  .onClick(() => {})  // 点击
  .onLongPress(() => {})  // 长按
  .onTouch(() => {})  // 触摸

TextInput()
  .onChange((value: string) => {})  // 输入变化

Swiper()
  .onChange((index: number) => {})  // 滑动变化

七、布局系统

ArkTS 提供丰富的布局容器：

Flex 布局

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
  Text('Item1')
  Text('Item2')
}

Grid 布局

Grid() {
  ForEach([1,2,3,4], (item) => {
    Text(`Item${item}`)
  })
}
.columnsTemplate("1fr 1fr")

Stack 布局

Stack() {
  Image('background.jpg')
  Text('水印')
}

八、样式设置

ArkTS 提供链式调用的样式API：

Text('样式示例')
  .fontSize(16)
  .fontColor(Color.White)
  .backgroundColor('#007DFF')
  .borderRadius(8)
  .padding(10)
  .margin({ top: 5, bottom: 5 })
  .width('90%')
  .height(40)

九、条件渲染与列表渲染

条件渲染

@State showDetails: boolean = false;

build() {
  Column() {
    if (this.showDetails) {
      Text('详细信息')
    }
  }
}

列表渲染

@State items: string[] = ['Apple', 'Banana', 'Orange'];

List() {
  ForEach(this.items, (item, index) => {
    ListItem() {
      Text(item)
    }
  })
}

十、异步操作

ArkTS 支持现代异步编程方式：

async fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    this.dataList = data;
  } catch (error) {
    console.error('请求失败:', error);
  }
}

十一、路由导航

ArkTS 提供完整的路由系统：

// 导航到新页面
router.pushUrl({
  url: 'pages/Detail',
  params: { id: 123 }
});

// 接收参数
aboutToAppear() {
  const params = router.getParams();
  this.id = params['id'];
}

// 路由返回
router.back();