ArkTS 鸿蒙开发语法完全指南：从入门到实战

心中有国也有家2026-03-20 17:46

📋 目录

  1. [ArkTS 简介与环境搭建](#ArkTS 简介与环境搭建)
  2. 基础语法速览
  3. [声明式 UI 核心语法](#声明式 UI 核心语法)
  4. 状态管理装饰器详解
  5. 网络请求与数据封装
  6. 实战案例：音乐播放器
  7. 最佳实践与性能优化

1. ArkTS 简介与环境搭建

什么是 ArkTS？

ArkTS 是华为基于 TypeScript 扩展的编程语言，专为 HarmonyOS 应用开发设计。它保留了 TypeScript 的静态类型特性，同时增加了声明式 UI 和状态管理能力。

复制代码 
TypeScript + 鸿蒙扩展 = ArkTS

核心特性

特性 说明
静态类型 编译时类型检查，减少运行时错误
声明式 UI 类似 React/Vue 的组件化开发模式
状态驱动 数据变化自动触发 UI 更新
跨设备 一次开发，多端部署

环境搭建

bash 复制代码 
# 1. 安装 DevEco Studio
# 下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio

# 2. 创建新项目
# File → New → Create Project → Empty Ability

# 3. 项目结构
project/
├── entry/
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/
│   │   │   │   ├── pages/      
│   │   │   │   ├── data/ 
│   │   │   │   ├──entrybackupability /   
│   │   │   │   └── entryability/ 
│   │   │   └── resources/      # 资源文件
│   │   └── module.json5        # 模块配置
│   └── hvigorfile.ts           # 构建配置
└── build-profile.json5         # 全局构建配置

2. 基础语法速览

变量声明

typescript 复制代码 
// ✅ 推荐：使用 let/const，明确类型
let count: number = 0;
const MAX_COUNT: number = 100;
let userName: string = 'Harmony';
let isActive: boolean = true;

//  避免：使用 var 或隐式类型
var oldStyle = '不推荐';  // 类型推断不明确

数据类型

typescript 复制代码 
// 基础类型
let id: number = 1001;
let title: string = "晴天";
let isLiked: boolean = true;

// 数组
let scores: number[] = [90, 85, 88];
let names: Array<string> = ['周杰伦', '陈奕迅'];

// 对象
interface Song {
  id: number;
  title: string;
  artist: string;
  duration: number;
}

let song: Song = {
  id: 1001,
  title: "晴天",
  artist: "周杰伦",
  duration: 269
};

// 联合类型
let status: 'loading' | 'success' | 'error' = 'loading';

// 可选属性
interface User {
  name: string;
  age?: number;  // 可选
  email?: string;
}

函数定义

typescript 复制代码 
// 普通函数
function add(a: number, b: number): number {
  return a + b;
}

// 箭头函数
const multiply = (a: number, b: number): number => a * b;

// 异步函数
async function fetchSongs(): Promise<Song[]> {
  const response = await http.get('/songs');
  return response.data;
}

// 默认参数
function greet(name: string = 'Guest'): string {
  return `Hello, ${name}`;
}

// 剩余参数
function sum(...numbers: number[]): number {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

条件与循环

typescript 复制代码 
// if-else
if (score >= 90) {
  console.info('优秀');
} else if (score >= 60) {
  console.info('及格');
} else {
  console.info('不及格');
}

// for 循环
for (let i = 0; i < 10; i++) {
  console.info(i);
}

// for...of（推荐遍历数组）
for (const song of songList) {
  console.info(song.title);
}

// for...in（遍历对象键）
for (const key in user) {
  console.info(`${key}: ${user[key]}`);
}

// while 循环
while (count < MAX_COUNT) {
  count++;
}

3. 声明式 UI 核心语法

组件结构

typescript 复制代码 
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Hello HarmonyOS')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

常用布局组件

typescript 复制代码 
// Column - 垂直布局
Column({ space: 10 }) {
  Text('顶部')
  Text('中间')
  Text('底部')
}

// Row - 水平布局
Row({ space: 10 }) {
  Image($r('app.media.icon'))
  Text('标题')
  Text('副标题')
}

// Stack - 层叠布局
Stack() {
  Image($r('app.media.background'))
  Text('覆盖文字')
    .position({ x: 20, y: 20 })
}

// Flex - 弹性布局
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
  Text('左')
  Text('中')
  Text('右')
}

// List - 列表
List({ space: 10 }) {
  ForEach(items, (item) => {
    ListItem() {
      Text(item.title)
    }
  }, (item) => item.id.toString())
}

// Grid - 网格
Grid() {
  ForEach(items, (item) => {
    GridItem() {
      Text(item.title)
    }
  })
}

通用属性

typescript 复制代码 
Text('示例文本')
  // 尺寸
  .width('100%')
  .height(50)
  .minWidth(100)
  .maxHeight(200)
  
  // 边距
  .margin(10)
  .margin({ top: 10, bottom: 20 })
  .padding(15)
  
  // 样式
  .fontSize(16)
  .fontWeight(FontWeight.Medium)
  .fontColor('#333333')
  .backgroundColor('#FFFFFF')
  
  // 边框
  .borderWidth(1)
  .borderColor('#CCCCCC')
  .borderRadius(8)
  
  // 阴影
  .shadow({
    radius: 10,
    color: 'rgba(0, 0, 0, 0.1)',
    offsetX: 0,
    offsetY: 5
  })
  
  // 透明度
  .opacity(0.8)
  
  // 可见性
  .visibility(Visibility.Visible)  // 或 Hidden/None
  
  // 布局权重
  .layoutWeight(1)
  
  // 对齐
  .textAlign(TextAlign.Center)
  .alignItems(VerticalAlign.Center)

事件处理

typescript 复制代码 
@Entry
@Component
struct EventDemo {
  @State count: number = 0;

  build() {
    Column() {
      Text(`点击次数：${this.count}`)
        .fontSize(20)
      
      Button('点击我')
        .onClick(() => {
          this.count++;
        })
      
      // 触摸事件
      Row()
        .onTouch((event: TouchEvent) => {
          console.info(`触摸类型：${event.type}`);
        })
      
      // 手势
      GestureGroup(GestureMode.Parallel) {
        ClickGesture()
          .onClick(() => console.info('点击'))
        LongPressGesture()
          .onAction(() => console.info('长按'))
      }
    }
  }
}

4. 状态管理装饰器详解

@State - 组件内状态

typescript 复制代码 
@Component
struct Counter {
  @State count: number = 0;

  build() {
    Column() {
      Text(`${this.count}`)
      Button('增加')
        .onClick(() => this.count++)
    }
  }
}

@Prop - 父传子（单向）

typescript 复制代码 
// 子组件
@Component
struct Child {
  @Prop title: string = '';  // 父组件传入，子组件可修改但不影响父组件

  build() {
    Text(this.title)
  }
}

// 父组件
@Entry
@Component
struct Parent {
  @State parentTitle: string = '父组件标题';

  build() {
    Column() {
      Child({ title: this.parentTitle })
      Button('修改')
        .onClick(() => this.parentTitle = '新标题')
    }
  }
}

@Link - 父子双向绑定

typescript 复制代码 
// 子组件
@Component
struct Child {
  @Link count: number;  // 与父组件双向绑定

  build() {
    Button(`${this.count}`)
      .onClick(() => this.count++)  // 会影响父组件
  }
}

// 父组件
@Entry
@Component
struct Parent {
  @State parentCount: number = 0;

  build() {
    Column() {
      Text(`父组件：${this.parentCount}`)
      Child({ count: $parentCount })  // 使用 $ 符号绑定
    }
  }
}

@Provide / @Consume - 跨代传递

typescript 复制代码 
// 祖先组件
@Component
struct Ancestor {
  @Provide themeColor: string = '#007DFF';

  build() {
    Column() {
      Descendant()
    }
  }
}

// 后代组件（任意层级）
@Component
struct Descendant {
  @Consume themeColor: string = '';

  build() {
    Text('主题色')
      .fontColor(this.themeColor)
  }
}

@Observed / @ObjectLink - 对象属性观察

typescript 复制代码 
@Observed
class Song {
  @ObjectLink title: string;
  @ObjectLink isLiked: boolean;

  constructor(title: string, isLiked: boolean) {
    this.title = title;
    this.isLiked = isLiked;
  }
}

@Component
struct SongItem {
  @ObjectLink song: Song;

  build() {
    Row() {
      Text(this.song.title)
      Button(this.song.isLiked ? '❤️' : '🤍')
        .onClick(() => this.song.isLiked = !this.song.isLiked)
    }
  }
}

@Builder - 自定义构建函数

typescript 复制代码 
@Component
struct CustomBuilder {
  @State items: string[] = ['A', 'B', 'C'];

  @Builder
  ItemBuilder(item: string, index: number) {
    Row() {
      Text(`${index + 1}. ${item}`)
        .fontSize(16)
    }
    .padding(10)
    .backgroundColor('#FFFFFF')
  }

  build() {
    Column() {
      ForEach(this.items, (item, index) => {
        this.ItemBuilder(item, index)
      })
    }
  }
}

@Styles - 复用样式

typescript 复制代码 
@Component
struct StyleDemo {
  @Styles
  commonTextStyle() {
    .fontSize(16)
    .fontColor('#333333')
    .padding(10)
  }

  @Styles
  cardStyle() {
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
    .shadow({ radius: 10, color: 'rgba(0,0,0,0.1)' })
  }

  build() {
    Column() {
      Text('标题')
        .commonTextStyle()
      
      Row()
        .cardStyle()
        .padding(20)
    }
  }
}

5. 网络请求与数据封装

Http 工具类封装

typescript 复制代码 
import http from '@ohos.net.http';

export class HttpUtil {
  private baseURL: string = 'https://api.example.com';
  private timeout: number = 10000;

  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
    const queryString = params ? '?' + Object.entries(params)
      .map(([k, v]) => `${k}=${v}`)
      .join('&') : '';
    
    return this.request<T>(`${url}${queryString}`, 'GET');
  }

  async post<T>(url: string, data?: any): Promise<T> {
    return this.request<T>(url, 'POST', data);
  }

  private async request<T>(url: string, method: string, data?: any): Promise<T> {
    const httpRequest = http.createHttp();
    
    return new Promise((resolve, reject) => {
      httpRequest.request(
        `${this.baseURL}${url}`,
        {
          method: method as http.HttpMethod,
          header: { 'Content-Type': 'application/json' },
          extraData: data,
          timeout: this.timeout
        },
        (err: Error, response: http.HttpResponse) => {
          if (err) {
            reject(err);
          } else {
            resolve(JSON.parse(response.result as string));
          }
          httpRequest.destroy();
        }
      );
    });
  }
}

export const httpUtil = new HttpUtil();

数据模型定义

typescript 复制代码 
export interface SongItemType {
  img: string
  name: string
  author: string
  url: string
  id:string
}

Mock 数据模拟

typescript 复制代码 
songs: SongItemType[] = [
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
      id: '0000'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
      name: '画',
      author: '赵磊',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.mp3',
      id: '0001'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
      name: 'Sweet Dreams',
      author: 'TPaul Sax / Eurythmics',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.mp3',
      id: '0002'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
      name: '奢香夫人',
      author: '凤凰传奇',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.m4a',
      id: '0003'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
      name: '空心',
      author: '光泽',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.mp3',
      id: '0004'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
      name: '反转地球',
      author: '潘玮柏',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.mp3',
      id: '0005'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
      name: 'No.9',
      author: 'T-ara',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.m4a',
      id: '0006'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
      name: '孤独',
      author: 'G.E.M.邓紫棋',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.m4a',
      id: '0007'
    },

    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
      name: 'Lose Control',
      author: 'Hedley',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.m4a',
      id: '0008'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
      name: '倩女幽魂',
      author: '张国荣',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.m4a',
      id: '0009'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
      name: '北京北京',
      author: '汪峰',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.m4a',
      id: '0010'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
      name: '苦笑',
      author: '汪苏泷',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.mp3',
      id: '0011'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
      name: '一生所爱',
      author: '卢冠廷 / 莫文蔚',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.m4a',
      id: '0012'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
      name: '月半小夜曲',
      author: '李克勤',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.mp3',
      id: '0013'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
      name: 'Rolling in the Deep',
      author: 'Adele',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.m4a',
      id: '0014'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
      name: '海阔天空',
      author: 'Beyond',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.m4a',
      id: '0015'
    }
  ]

6. 实战案例：音乐播放器

完整页面代码

typescript 复制代码 
import { SongItemType } from "../models/music"

@ComponentV2
export struct Find {
  songs: SongItemType[] = [
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
      id: '0000'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
      name: '画',
      author: '赵磊',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.mp3',
      id: '0001'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
      name: 'Sweet Dreams',
      author: 'TPaul Sax / Eurythmics',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.mp3',
      id: '0002'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
      name: '奢香夫人',
      author: '凤凰传奇',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.m4a',
      id: '0003'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
      name: '空心',
      author: '光泽',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.mp3',
      id: '0004'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
      name: '反转地球',
      author: '潘玮柏',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.mp3',
      id: '0005'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
      name: 'No.9',
      author: 'T-ara',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.m4a',
      id: '0006'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
      name: '孤独',
      author: 'G.E.M.邓紫棋',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.m4a',
      id: '0007'
    },

    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
      name: 'Lose Control',
      author: 'Hedley',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.m4a',
      id: '0008'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
      name: '倩女幽魂',
      author: '张国荣',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.m4a',
      id: '0009'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
      name: '北京北京',
      author: '汪峰',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.m4a',
      id: '0010'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
      name: '苦笑',
      author: '汪苏泷',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.mp3',
      id: '0011'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
      name: '一生所爱',
      author: '卢冠廷 / 莫文蔚',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.m4a',
      id: '0012'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
      name: '月半小夜曲',
      author: '李克勤',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.mp3',
      id: '0013'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
      name: 'Rolling in the Deep',
      author: 'Adele',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.m4a',
      id: '0014'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
      name: '海阔天空',
      author: 'Beyond',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.m4a',
      id: '0015'
    }
  ]

  build() {
    Column() {
      Text('猜你喜欢')
        .fontColor('#fff')
        .width('100%')
        .margin({ bottom: 10 })
      List() {
        ForEach(this.songs, (item: SongItemType, index: number) => {
          ListItem() {
            Row() {
              // 图
              Stack() {
                Image(item.img)
                  .width(80)
                  .border({ radius: 8 })
                  .margin({ right: 10 })

              }

              // 字
              Column() {
                Text(item.name)
                  .fontColor('#F3F3F3')
                  .width('100%')
                  .fontWeight(700)
                  .margin({ bottom: 15 })
                Row() {
                  Text('VIP')
                    .fontColor('#9A8E28')
                    .border({ width: 1, color: '#9A8E28', radius: 12 })
                    .padding({
                      left: 5,
                      right: 5,
                      top: 3,
                      bottom: 3
                    })
                    .margin({ right: 10 })
                  Text(item.author)
                    .fontColor('#696969')
                }
                .width('100%')
              }
              .layoutWeight(1)

              // 更多
              Image($r('app.media.ic_more'))
                .width(24)
                .fillColor('#FEFEFE')
            }
            .width('100%')
            .height(80)
            // .backgroundColor(Color.Pink)
            .margin({ bottom: 10 })

          }
        })
      }
      .scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#131313')
    .padding({ left: 10, right: 10 })
    // 扩充组件安全区域
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

效果预览

注意：有关照片可以自己设置。

7. 最佳实践与性能优化

代码规范

typescript 复制代码 
// ✅ 推荐
@Entry
@Component
struct MusicPlayer {
  @State songList: SongItem[] = [];
  
  private readonly MAX_COUNT = 100;
  
  aboutToAppear() {
    this.initData();
  }
  
  private async initData(): Promise<void> {
    // ...
  }
}

// ❌ 避免
var count = 0;  // 使用 let/const
function test() {}  // 使用箭头函数或类方法

性能优化技巧

typescript 复制代码 
// 1. 使用 ForEach 时提供稳定 key
ForEach(items, (item) => {
  ListItem() { Text(item.title) }
}, (item) => item.id.toString());  // ✅ 使用唯一 ID

// 2. 避免在 build 中执行复杂计算
@State computedValue: number = 0;

aboutToAppear() {
  this.computedValue = this.expensiveCalculation();  // ✅ 在生命周期中计算
}

// 3. 使用 @Builder 复用 UI
@Builder
ItemTemplate(item: Item) {
  // 复用逻辑
}

// 4. 懒加载长列表
List({ space: 10 }) {
  ForEach(this.items, (item) => {
    ListItem() {
      // 按需加载内容
    }
  })
}
.onReachEnd(() => this.loadMore());  // 分页加载

// 5. 避免不必要的状态更新
@State count: number = 0;

increment() {
  if (this.count < MAX) {
    this.count++;  // ✅ 条件更新
  }
}

调试技巧

typescript 复制代码 
// 1. 使用 console 输出
console.info('普通日志');
console.warn('警告信息');
console.error('错误信息');

// 2. 条件日志
const DEBUG = true;
if (DEBUG) {
  console.info('调试信息:', data);
}

// 3. 使用 DevEco Studio 调试器
// - 设置断点
// - 查看变量
// - 单步执行

// 4. 性能监控
@Builder
OptimizedBuilder(data: Data) {
  const start = Date.now();
  // UI 构建逻辑
  const end = Date.now();
  console.info(`构建耗时: ${end - start}ms`);
}

常见问题排查

问题 原因 解决方案
UI 不更新 状态变量未用 @State 添加 @State 装饰器
类型错误 类型定义不匹配 检查接口定义
内存泄漏 未销毁监听器 在 aboutToDisappear 中清理
列表卡顿 数据量过大 使用分页 + 懒加载
网络请求失败 权限未配置 检查 module.json5 网络权限

📚 学习资源

官方文档

社区资源

  • 开源参考项目：
    • Gitee: 黑马云音乐鸿蒙版
    • GitCode: NutPi 鸿蒙音乐
  • 官方文档：HarmonyOS Developer Docs

推荐工具

  • DevEco Studio - 官方 IDE
  • ArkTS Linter - 代码检查工具
  • Previewer - 实时预览工具
相关推荐
Georgewu4 小时前
如何判断应用在鸿蒙卓易通或者出境易环境下？
android·harmonyos
菜鸟不学编程5 小时前
鸿蒙中的 AR/VR 开发与场景创建
ar·vr·harmonyos
平生幻6 小时前
华为防火墙-日志分析INFO/2/ICLogfileThreshold
华为
Swift社区6 小时前
鸿蒙应用上架流程经验
华为·harmonyos
@不误正业7 小时前
OpenHarmony集成AI Agent实战：打造鸿蒙智能助理
人工智能·华为·harmonyos
小资同学8 小时前
考研机试之递归与贪心算法
算法·华为·贪心算法
仓颉编程语言9 小时前
CangjieSkills 正式开源：为仓颉 AI 编程打造的“技能增强“方案，实测降低 60% 费用
华为·ai编程·鸿蒙·仓颉编程语言
弓.长.11 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库：react-native-netinfo — 网络状态检测
网络·react native·harmonyos
弓.长.11 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库：react-native-network-info — 网络信息获取
网络·react native·harmonyos
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04Labelme从安装到标注：零基础完整指南05AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南06UV安装并设置国内源07小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）08OpenClaw Control UI安全上下文访问配置09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南