鸿蒙（HarmonyOS）应用开发深度入门：ArkTS 语法、UI 构建与状态管理详解

HelloHarmony/
├── AppScope/                  # 应用全局作用域
│   └── app.json5              # 应用基本信息（名称、图标、权限、支持的设备类型等）
├── entry/                     # 默认功能模块（可有多个模块，如 service、feature）
│   ├── src/main/
│   │   ├── ets/               # ArkTS 源码目录
│   │   │   ├── entryability/  # 应用入口 Ability（类似 Android 的 Activity）
│   │   │   │   └── EntryAbility.ts
│   │   │   └── pages/         # 页面组件
│   │   │       └── Index.ets
│   │   ├── resources/         # 资源目录（支持多分辨率、多语言）
│   │   │   ├── base/          # 默认资源（通用）
│   │   │   ├── en_US/         # 英文资源（可选）
│   │   │   └── zh_CN/         # 中文资源（可选）
│   │   │       └── element/
│   │   │           └── string.json  # 字符串资源
│   │   └── module.json5       # 模块配置：路由、组件注册、依赖等
├── hvigorfile.ts              # 构建脚本（类似 webpack.config.js）
├── oh-package.json5           # 项目依赖（类似 package.json，用于集成 HMS Core 等）
└── build-profile.json5        # 构建配置（签名、打包策略等）

{
  "module": {
    "name": "entry",
    "type": "entry", // 入口模块
    "mainElement": "EntryAbility", // 主 Ability
    "pages": "/pages", // 页面路径前缀
    "requestPermissions": [ // 权限申请
      { "name": "ohos.permission.INTERNET" }
    ]
  }
}

{
  "app": {
    "bundleName": "com.example.helloharmony",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon", // 图标引用
    "label": "$string:app_name" // 应用名称（支持多语言）
  }
}

let name: string = 'Harmony';
const age: number = 3;
interface User { name: string; id: number; }

Column() {
  Text('顶部')
  Text('中间')
  Text('底部')
}
.justifyContent(FlexAlign.SpaceBetween) // 主轴分布
.alignItems(HorizontalAlign.Center)     // 交叉轴对齐

Button('点击')
  .onClick(() => {
    console.log('按钮被点击');
  })
  .onTouch((event) => {
    if (event.type === TouchType.Down) {
      // 按下时变色
    }
  })

// 在 Index.ets 顶部定义
interface TodoItem {
  id: number;
  text: string;
  completed: boolean;
}

import { View, Text, Button, Column, Row, TextInput, List, ListItem, Checkbox } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State todos: TodoItem[] = [];
  @State newTodoText: string = '';
  private nextId: number = 1;

  build() {
    Column() {
      // 输入区域
      Row() {
        TextInput({ placeholder: '输入新任务' })
          .onChange((value) => {
            this.newTodoText = value;
          })
          .width(250)

        Button('添加')
          .onClick(() => {
            if (this.newTodoText.trim()) {
              this.todos.push({
                id: this.nextId++,
                text: this.newTodoText.trim(),
                completed: false
              });
              this.newTodoText = '';
            }
          })
      }
      .margin({ bottom: 20 })

      // 任务列表
      List() {
        ForEach(this.todos, (item: TodoItem) => {
          ListItem() {
            Row() {
              Checkbox({ name: 'todo', select: item.completed })
                .onChange((isChecked) => {
                  const index = this.todos.findIndex(t => t.id === item.id);
                  if (index !== -1) {
                    this.todos[index].completed = isChecked;
                  }
                })

              Text(item.text)
                .decoration({ type: item.completed ? TextDecorationType.LineThrough : TextDecorationType.None })

              Button('删除')
                .onClick(() => {
                  this.todos = this.todos.filter(t => t.id !== item.id);
                })
                .margin({ left: 20 })
            }
            .width('100%')
            .padding(10)
          }
        }, item => item.id.toString())
      }
      .width('100%')
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

console.log('当前计数:', this.count);
console.error('发生错误');