零基础鸿蒙应用开发第二节：开发工具的功能介绍

零基础鸿蒙应用开发学习计划表

【学习目标】

  1. 熟悉DevEco Studio界面布局与常用功能，能快速定位核心操作区域；
  2. 掌握工程目录的核心结构，会隐藏冗余目录聚焦开发核心文件；
  3. 熟悉工具内置汉化、代码提示等辅助功能，降低新手操作门槛；
  4. 学会创建、管理ArkTS页面文件与工具类文件，实现基础代码的导入与调用。

【学习重点】

以“工具实操”为核心，简化工程结构、演示工具功能，降低复杂配置理解成本，专注代码编写本身，可快速上手。

一、DevEco Studio 界面与核心功能

DevEco Studio界面布局遵循“高效开发流”设计，核心区域分工明确，无需额外配置即可满足基础开发需求：

功能区域2026-01-02_100927_423

新手提示：若未看到对应功能区域，可通过顶部菜单栏 View 勾选对应选项（如Tool Windows > Project显示文件导航区、View > Appearance > Toolbar显示快捷工具栏）。

  • 区域1：核心功能菜单区
    集成项目创建（File）、编辑工具（Edit）、运行调试（Run）等全流程操作入口，支持通过快捷键快速调用：

    • Windows：Ctrl+N 新建文件、Ctrl+S 保存、Ctrl+R 运行；
    • macOS：Cmd(Command)+N 新建文件、Cmd+S 保存、control+R 运行 control+D 调试运行。

  • 区域2：项目文件导航区
    以树形结构展示项目文件，支持“按模块筛选”“关键词搜索（右上角搜索框）”，右键菜单可直接创建页面/组件/目录，大幅提升文件管理效率。

  • 区域3：代码编辑区
    支持ArkTS语法高亮、自动缩进、括号匹配，内置“代码折叠”功能（点击左侧▼符号），可折叠复杂布局代码，聚焦当前编辑内容；

    • Windows 快捷键：折叠 Ctrl + - ，展开 Ctrl + + ； Mac 快捷键：折叠 option + command + - ，展开 option + command + +；

  • 区域4：快捷工具栏区

    1. 上方：包含项目视图切换（Project/Structure）、代码格式化（Windows：Ctrl+Alt+L；macOS：Option+ command +L）、版本控制等高频操作按钮，减少菜单层级跳转；
    2. 下方：集成核心辅助工具，新手阶段重点关注这3个：
      • Log：查看应用运行日志（核心）；
      • Terminal：执行命令（如安装第三方依赖）；
      • Problems：查看代码语法错误（标红提示）。

  • 区域5：运行与设备控制区

    一键切换运行设备（模拟器/真机），支持“运行”（run：Windows：Ctrl+F4；macOS：Cmd+4）、“调试”（debug：Windows：Ctrl+F5；macOS：Cmd+5）、“热重载”（Previewer），修改代码后无需重启应用即可预览效果。

    📌 新手提示：首次运行需先创建模拟器（点击设备下拉框 → Manage Device Manager → 下载手机模拟器）。

  • 区域6：辅助功能区
    包含Notifications（通知）、Tabnine（AI代码补全）、Previewer（UI预览器）等，新手阶段重点关注Previewer（实时预览UI效果），其余功能了解即可。

提示：后续课程会结合具体场景详解功能用法，当前只需记住各区域定位，便于快速查找工具。

二、工程目录详解

默认工程目录包含大量自动生成的配置文件，无需逐一关注。通过以下操作可隐藏目录视图，聚焦核心文件：

2.1 目录隐藏操作

  • 基础隐藏：左侧Project面板顶部，点击“Project”下拉菜单，选择“Project Files”，隐藏冗余配置目录。

20260102103359_599_125

  • 深度隐藏：选择“Ohos”视图，仅保留与业务开发相关的核心目录（如pages、resources），进一步减少视觉干扰。

2.2 核心目录结构

MyApplication/                  // 项目根目录（名称可自定义，建议英文）
├─ AppScope/                    // 应用全局作用域目录（核心：管理全局配置/共享资源）
├─ entry/                       // 主入口模块（核心：应用主要功能都在这里）
│  ├─ src/
│  │  ├─ main/
│  │  │  ├─ ets/                // ArkTS代码核心目录
│  │  │  │  ├─ entryability/    // 主应用入口能力目录（控制应用生命周期）
│  │  │  │  ├─ entrybackupability/ // 备份能力入口目录
│  │  │  │  ├─ pages/           // 页面组件目录（存放所有UI页面）
│  │  │  │  │  └─ Index.ets     // 首页文件（默认启动页）
│  │  │  ├─ resources/          // 模块资源目录（图片、文字、颜色等）
│  │  │  │  ├─ base/            // 基础资源子目录（默认使用）
│  │  │  │  ├─ dark/            // 暗黑模式资源目录（可选）
│  │  │  │  └─ rawfile/         // 原生静态文件目录（如JSON、txt）
│  │  │  └─ module.json5        // 模块配置文件
│  ├─ mock/                     // 模拟数据目录（可选）
│  ├─ ohosTest/                 // 鸿蒙专属测试目录（新手暂不用）
│  ├─ test/                     // 通用测试目录（新手暂不用）
│  ├─ .gitignore                // Git忽略配置文件（可选）
│  ├─ build-profile.json5       // 工程构建配置文件（默认即可）
│  ├─ hvigorfile.ts             // Hvigor构建脚本文件（自动生成）
│  └─ obfuscation-rules.txt     // 代码混淆规则文件（发布时用）

三、核心配置项介绍

3.1 全局层配置（⭐应用级核心）

3.1.1 AppScope/（全局共享目录）

  • 作用：管理整个应用的全局信息（如应用名称、图标、版本），所有模块共享此目录下的配置和资源，避免多模块配置冲突。

3.1.2 AppScope/app.json5（应用全局配置）

{
  "app": {
    "bundleName": "com.example.myapplication",  // 应用唯一ID（反向域名规则，发布后不可修改）
    "vendor": "example",                        // 应用开发者/厂商标识
    "versionCode": 1000000,                     // 系统识别的数字版本号（升级时递增）
    "versionName": "1.0.0",                     // 用户可见的版本名称（如1.0.0）
    "icon": "$media:layered_image",             // 全局应用图标（引用media目录的图片）
    "label": "$string:app_name"                 // 全局应用名称（多语言支持）
  }
}
  • 关键注意：
    1. bundleName 必须遵循“反向域名”规则（如com.你的公司.应用名），发布后不可修改；
    2. 资源引用无需app:前缀，直接用$media:资源名/$string:资源名即可。

3.1.3 AppScope/resources/（全局共享资源）

  • 功能：存放跨模块共享的资源（如全局图标、公共主题色），优先级低于模块级resources（同名资源会被模块内的覆盖）。

3.2 模块层配置（⭐主模块核心）

3.2.1 entry/（应用入口模块）

  • 定位：应用的核心模块，承载主要功能，是启动时第一个加载的模块（一个应用只能有1个entry模块）。

3.2.2 entry/src/main/module.json5（模块配置）

{
  "module": {
    "name": "entry",                     // 模块名称（唯一）
    "type": "entry",                     // 模块类型（entry=主入口）
    "description": "$string:module_desc",// 模块描述（多语言支持）
    "mainElement": "EntryAbility",       // 应用启动时加载的第一个Ability
    "requestPermissions": [],            // 系统权限列表（如相机、网络，新手暂空）
    "deviceTypes": [                     // 支持的设备类型
      "phone"                            // 手机（可选：tablet平板、tv电视、wearable穿戴）
    ],
    "deliveryWithInstall": true,         // 安装应用时同步安装此模块
    "installationFree": false,           // 否为免安装应用
    "pages": "$profile:main_pages",      // 页面路由配置（管理所有页面路径）
    "abilities": [                       // Ability列表（鸿蒙应用核心组件）
      {
        "name": "EntryAbility",          // Ability名称 （程序启动主入口）
        "srcEntry": "./ets/entryability/EntryAbility.ets", //（主入口文件路径）
        "description": "$string:EntryAbility_desc", // 描述信息
        "icon": "$media:layered_image",  // Ability图标
        "label": "$string:EntryAbility_label", // Ability名称
        "startWindowIcon": "$media:startIcon", // 启动窗口图标
        "startWindowBackground": "$color:start_window_background", // 启动页背景色
        "exported": true,                // 是否允许其他应用调用（首页需true）
        "skills": [                      // 匹配系统调用意图
          {
            "entities": [
              "entity.system.home"       // 标识为桌面入口（应用图标对应的入口）
            ],
            "actions": [
              "ohos.want.action.home"    // 作为首页的动作标识
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [              // 扩展Ability（如备份功能，新手暂不用）
      {
        "name": "EntryBackupAbility",    
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",                
        "exported": false,               
        "metadata": [                    
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ]
      }
    ]
  }
}
  • 新手须知：此文件是模块的“身份证”，新手阶段无需手动修改，知晓mainElement控制启动入口、deviceTypes控制支持的设备类型即可。

3.3 代码层结构（⭐开发主战场）

3.3.1 entry/src/main/ets/（业务代码根目录）

  • 地位：日常开发核心工作区，所有业务逻辑、页面代码都放在这里。

3.3.2 entryability/EntryAbility.ets（生命周期控制）

  • 作用：鸿蒙应用的“核心入口”，管理应用从启动到销毁的全生命周期流程，基础阶段不做了解，UI阶段详细讲解。

3.3.3 pages/（页面组件目录）

  • 功能：存放所有页面组件，每个页面文件需包含@Entry装饰器（标识为可独立显示的页面），新增页面会自动注册到路由配置中。

3.4 构建配置层（辅助配置）

3.4.1 build-profile.json5

  • 作用：控制应用构建流程，配置目标SDK版本、代码混淆等（开发阶段默认即可）。
{
  "app": {
    "signingConfigs": [],
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
        "targetSdkVersion": "6.0.0(20)", // 目标SDK版本
        "compatibleSdkVersion": "5.0.0(12)", // 最低兼容版本
        "runtimeOS": "HarmonyOS",
        "buildOption": {
          "strictMode": {
            "caseSensitiveCheck": true,
            "useNormalizedOHMUrl": true
          }
        }
      }
    ],
    "buildModeSet": [
      {
        "name": "debug" // 调试模式（开发时用）
      },
      {
        "name": "release" // 发布模式（上线时用）
      }
    ]
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "default",
          "applyToProducts": [
            "default"
          ]
        }
      ]
    }
  ]
}

解释：假如你的手机是鸿蒙5.0系统，最低兼容版本"compatibleSdkVersion": "5.0.0(12)", 目标版本号20是没有问题的。假设现在你修改"compatibleSdkVersion": "6.0.0(20)"是无法真机运行的。最低兼容版本号不可高于真机版本号。

3.4.2 oh-package.json5

  • 作用：管理第三方库依赖（类似前端package.json），支持ohpm install安装依赖。
  • 新手示例：安装网络请求库（后续会用）：
    # 打开Terminal面板，输入以下命令
ohpm install @ohos/axios

四、实用工具功能详解

4.1 汉化与语言设置

DevEco Studio支持中文界面，降低语言门槛，操作步骤如下：

  1. 打开设置：顶部菜单栏 File > Settings（Windows）或 DevEco Studio > Settings（macOS）。
  2. 定位语言设置：左侧导航栏依次展开 Appearance & Behavior > System Settings > Language。
  3. 选择中文：在“Language”下拉菜单中选择“Chinese（简体）”（未显示则点击“Download and Install”下载）。
  4. 重启生效：点击“OK”确认，重启DevEco Studio后界面切换为中文。

4.2 代码提示与快捷操作

IDE对ArkTS提供强语法支持，核心效率功能包括：

  • 智能补全：输入@C自动联想@Component装饰器，输入Text自动补全Text()组件；
  • 快捷生成页面：右键pages目录 → New > ArkTS Page，自动生成包含@Component、build()函数的页面模板；
  • 错误实时校验：代码编写时即时标红语法错误（如变量未定义、括号不匹配），鼠标悬停可查看错误原因和修复建议；
  • 代码格式化：按Ctrl+Alt+L（Windows）/Option+Cmd+L（macOS）自动整理代码格式，避免缩进混乱。

五、创建与管理项目文件

基础阶段暂不讲解ArkUI相关内容，先聚焦代码组织与基础语法，通过独立目录管理学习内容（避免UI页面代码臃肿）。

5.1 步骤1：创建工具目录

  1. 展开左侧文件导航区：entry > src > main > ets；
  2. 右键ets目录 → 选择 New > Directory；
  3. 输入目录名utils（文件夹名称），按回车确认。

5.2 步骤2：新建工具类文件

  1. 右键utils目录 → 选择 New > ArkTS File；
  2. 输入文件名TestFunction（建议大驼峰命名），按回车确认。

5.3 步骤3：编写工具类代码

打开TestFunction.ets，输入以下代码：

// 导出工具类（export表示可被其他文件导入使用）
export class TestFunction {
  /**
   * 静态方法：打印测试信息
   * 静态方法无需实例化，直接通过类名调用
   */
  static printInfo() {
    // 控制台打印日志（新手阶段用console，后续替换为鸿蒙hilog）
    console.log("工具类测试：方法调用成功 🎉")
  }
}

5.4 步骤4：在首页导入并使用工具类

打开pages/Index.ets，替换原有代码：

// 导入工具类（路径说明：pages是ets的子目录，需向上回溯一层找到utils）
import { TestFunction } from '../utils/TestFunction'

// @Entry：标识当前组件为页面入口（可独立显示）
@Entry
// @Component：标识当前结构为UI组件
@Component
struct Index {
  /**
   * 生命周期方法：页面即将显示时执行
   * 适合放页面初始化逻辑（如调用工具类、加载数据）
   */
  aboutToAppear(): void {
    // 调用工具类的静态方法
    TestFunction.printInfo()
  }

  /**
   * build函数：构建UI界面
   * 所有UI组件都要写在build()内
   */
  build() {
    // Column：垂直布局组件（后续详解）
    Column() {
      // Text：文本组件，显示页面内容
      Text("工具类测试页面")
        .fontSize(20) // 设置字体大小
    }
    .width('100%') // 宽度占满屏幕
    .height('100%') // 高度占满屏幕
    .justifyContent(FlexAlign.Center) // 内容垂直居中
  }
}

5.5 管理模拟器

  1. 打开下载窗口

DeviceManger_20260112223127_634_125

  1. 下载模拟器

下载管理模拟器_20260112223301_635_125

5.5 步骤5：预览/运行项目

方式1：UI预览

  1. 打开Index.ets文件；
  2. 点击右侧Previewer面板；
  3. 等待几秒后，预览面板会显示“工具类测试页面”（无需启动模拟器）。

预览模式_20260112224000_636_125

方式2：模拟器运行

  1. 点击顶部运行设备下拉框 → 选择已创建的手机模拟器；
  2. 点击运行按钮（▶️）或按Ctrl+R（Windows）/Control+R（macOS）；
  3. 等待模拟器启动并加载应用。

5.6 步骤6：查看运行结果

  1. 打开底部Log面板（若未显示，点击View > Tool Windows > Log）；
  2. 在Log面板的搜索框输入“工具类测试”，可快速筛选出日志；
  3. 成功结果：控制台显示 工具类测试：方法调用成功。

查看日志_20260112222356_633_125

📌 新手避坑：

  1. 日志要在Log面板看，不是Terminal终端；
  2. 若Log面板无内容，检查模拟器是否正常启动、代码是否有语法错误；
  3. 路径错误会导致导入失败（如../utils写成./utils），需注意目录层级。

六、代码仓库

操作提示：

  1. 下载代码后，启动DevEco Studio → 点击File→Open → 选择代码根目录（如MyApplication）；
  2. 核心注意：目录路径绝对不能包含中文、空格或特殊字符（如￥、&、*），否则工程加载失败；

七、内容总结

  1. 工具界面：核心掌握3个高频区——文件导航区（管理文件）、代码编辑区（写代码）、运行与设备控制区（启动应用）；辅助功能区知晓位置即可，后续按需学习。
  2. 工程目录：通过“Project Files”/“Ohos”视图隐藏冗余目录，聚焦核心：AppScope（全局配置）、entry/ets（业务代码）、resources（资源）；自动生成目录不要改。
  3. 核心配置：新手只需知晓EntryAbility.ets控制应用生命周期，pages存页面，utils放我们学习的内容；复杂配置文件无需死记，后续按需查阅。
  4. 工具辅助：汉化降低理解成本，代码提示/格式化提升效率，是新手必备技能；务必完成汉化设置，熟练使用代码补全和格式化快捷键。
  5. 实操核心：会创建utils文件夹、导入调用，能在Log面板查看日志；核心是方便管理我们编写的代码。

八、下节预告

下一节我们将聚焦ArkTS基础语法的核心内容：深入讲解变量声明（let/const）的使用规则与场景差异、基本数据类型（string/number/boolean）的特性及实操用法，以及类型注解的规范写法；同时帮助你理解ArkTS作为强类型语言的核心特性，掌握这些基础内容后，就能为后续编写鸿蒙应用的业务逻辑筑牢扎实的基础。

posted @ 2026-01-14 11:33  鸿蒙-散修  阅读(7)  评论(0)    收藏  举报