目录
一、基础语法
二、声明式 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();
开发建议
- 使用 DevEco Studio 进行开发
- 参考官方文档: HarmonyOS开发者官网
- 从简单示例开始，逐步构建复杂应用
- 合理使用状态管理，避免过度嵌套
- 注意性能优化，特别是列表渲染场景
