当前位置：首页 > news >正文

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

news 来源：原创 2025/6/20 12:55:00

一、基础语法

二、声明式 UI 开发

基本组件结构

三、状态管理

四、生命周期钩子

五、组件化开发

1. 创建自定义组件

2. 组件嵌套

六、事件处理

七、布局系统

八、样式设置

九、条件渲染与列表渲染

十、异步操作

十一、路由导航

开发建议

一、基础语法

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();