散修带你入门鸿蒙应用开发基础：启程篇（下）

鸿蒙应用开发基础：启程篇（下）

【课程目标】

熟悉DevEco Studio界面布局与常用功能
掌握工程目录精简配置（忽略自动生成冗余文件）
了解工具内置汉化、代码提示等辅助功能
学会创建、管理ArkTS页面文件与组件

【本节重点】

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

一、DevEco Studio 界面与核心功能

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

区域1：核心功能菜单区
集成项目创建（File）、编辑工具（Edit）、运行调试（Run）等全流程操作入口，支持通过快捷键快速调用（如Ctrl+N新建文件）。
区域2：项目文件导航区
以树形结构展示项目文件，支持“按模块筛选”“关键词搜索”，右键菜单可直接创建页面/组件，大幅提升文件管理效率。
区域3：代码编辑区
支持ArkTS语法高亮、自动缩进、括号匹配，内置“代码折叠”功能（点击左侧-符号），可折叠复杂布局代码，聚焦当前编辑内容。
区域4：快捷工具栏区
包含项目视图切换（Project/Structure）、代码格式化（Ctrl+Alt+L）、版本控制等高频操作按钮，减少菜单层级跳转。
区域5：运行与设备控制区
一键切换运行设备（模拟器/真机），支持“运行”（▶️）、“调试”（🐞）、“热重载”（♻️），修改代码后无需重启应用即可预览效果。
区域6：辅助功能区
集成“问题检查”（实时显示语法错误）、“终端”（执行ohpm命令）、“预览器”（UI实时渲染），一站式解决开发中的辅助需求。

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

二、工程目录详解

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

2.1 目录精简操作

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

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

2.2 精简后核心目录结构

├─ MyApplication/                  // 项目根目录
│  ├─ AppScope/                    // 全局配置（⭐核心）
│  │  ├─ app.json5                 // 应用名称/版本/权限等全局设置
│  │  └─ resources/                // 全局资源（多语言/公共媒体等）
│  ├─ entry/                       // 主模块（⭐核心）
│  │  ├─ src/main/
│  │  │  ├─ ets/                   // 代码主战场
│  │  │  │  ├─ entryability/       // 应用入口管理
│  │  │  │  │  └─ EntryAbility.ets  // 应用生命周期控制
│  │  │  │  ├─ pages/              // 所有页面存放
│  │  │  │  │  └─ Index.ets        // 默认首页
│  │  │  │  └─ model/              // 建议新增：数据模型层
│  │  │  ├─ resources/             // 模块资源（⭐分层结构）
│  │  │  │  ├─ base/               // 基础资源
│  │  │  │  │  ├─ element/         // 字符串/颜色值
│  │  │  │  │  └─ media/           // 图片/视频
│  │  │  │  └─ en_US/              // 多语言适配
│  │  │  └─ module.json5           // 模块能力声明（⭐设备类型/入口组件）
│  ├─ build-profile.json5          // 工程级构建配置（⭐arkOptions等高级设置）
│  └─ oh-package.json5             // 工程级依赖管理（⭐全局依赖覆盖）

说明：带...的目录（如.hvigor、oh_modules）由系统自动维护，无需手动修改，精简后不影响开发。

三、核心配置项介绍

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

3.1.1 AppScope/（全局共享目录）

作用：管理整个应用的全局信息，所有模块共享此目录下的配置和资源，避免多模块配置冲突。

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

{
  "app": {
    "bundleName": "com.example.myapplication",  // 应用唯一ID（反向域名规则）
    "versionCode": 1000000,                     // 系统识别的数字版本号
    "versionName": "1.0.0",                     // 用户可见的版本名称
    "icon": "$media:app_icon",                   // 应用图标（全局资源引用）
    "label": "$string:app_name"                  // 应用名称（多语言支持）
  }
}

关键注意：bundleName发布后不可修改，需开发初期确定规范。

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

功能：存放跨模块共享的资源（图标、全局字符串、公共主题色等）。
引用方式：$media:资源名（媒体）、$string:资源名（字符串），支持多语言自动切换。

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

3.2.1 entry/（应用入口模块）

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

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

{
  "module": {
    "type": "entry",                  // 模块类型（固定为entry）
    "mainElement": "EntryAbility",    // 启动入口能力
    "deviceTypes": ["phone", "tablet"], // 支持的设备类型
    "requestPermissions": [           // 系统权限申请
      {"name": "ohos.permission.INTERNET"}
    ]
  }
}

作用：声明模块能力和配置，是模块的“身份证”。

3.2.3 entry/src/main/resources/（模块级资源）

特点：优先级高于全局资源（同名覆盖），按场景分层：
- base/element：基础元素（文字、颜色配置）
- base/media：媒体资源（图片、音频）
- en_US/：多语言资源（自动适配系统语言）

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

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

地位：日常开发核心工作区，按职责分层组织代码。

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

作用：应用“大脑”，控制生命周期：
- onCreate()：应用初始化（仅一次）
- onWindowStageCreate()：窗口创建（设置首页路由）
- onDestroy()：应用销毁（释放资源）

3.3.3 pages/（页面组件目录）

功能：存放所有页面组件，需包含@Entry装饰器，新增页面自动注册路由。

3.3.4 model/（建议新增：数据模型层）

作用：分离UI与数据逻辑（用户信息、网络请求等），符合单一职责原则。

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

3.4.1 build-profile.json5

作用：控制应用构建流程，配置目标SDK版本、代码混淆等（开发阶段默认即可）。

3.4.2 oh-package.json5

作用：管理第三方库依赖，类似前端package.json，支持ohpm install安装依赖。

四、实用工具功能详解

4.1 汉化与语言设置

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

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

4.2 代码提示与快捷操作

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

智能补全：输入@C自动联想@Component装饰器，输入组件名自动补全标签（如Tex→Text()）。
快捷生成代码：右键pages目录选择“New > ArkTS Page”，自动生成包含@Component、build()函数的页面模板。
错误实时校验：代码编写时即时标红语法错误，并提供修复建议（如变量未定义、括号不匹配）。

五、创建与管理项目文件

基础阶段我们不讲ArkUI相关内容，着重针对打牢基础，在后边的学习阶段全程通透。通过独立目录管理工具类，实现代码复用与逻辑分离。

5.1 创建工具目录

在 ets 目录右键选择 New > Directory，命名为“utils”。

5.2 新建工具类文件

在该目录右键选择 New > ArkTS File，命名为“TestFunction”。

5.3 编写工具类代码

// 定义并导出工具类
export class TestFunction {
  // 静态方法：打印测试信息
  static printInfo() {
    console.log("工具类测试：方法调用成功")
  }
}

5.4 导入函数

在 Index.ets 中导入并使用：

// 导入工具类（路径需根据实际目录层级调整）
import { TestFunction } from '../utils/TestFunction'

@Entry
@Component
struct Index {
  // 页面即将显示时调用
  aboutToAppear(): void {
    TestFunction.printInfo() // 控制台输出测试信息
  }

  build() {
    Column() {
      Text("工具类测试页面")
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}

5.5 预览运行

5.6 控制台会输出

工具类测试：方法调用成功

为啥这节内容这么写，其实整个基础阶段，基本都是在打印输出内容。道友坚持坚持这个阶段很快就会过去。

【代码仓库】：

基础阶段代码都在这个仓库：https://gitee.com/juhetianxia321/harmony-os-code-base.git

估计有道友下载代码后不会打开呢，首先打开开发工具，然后在核心工具菜单栏找到File->Open-选择文件路径找到对应的程序文件，例如MyApplication。注意目录不要存在中文，对文章内容所有建议，问题或错误请联系1156203010@qq.com或者留言。

【课程总结】

DevEco Studio的6大核心区域认识，重点关注文件导航、代码编辑和运行控制区。
工程目录可通过“Project Files”或“Ohos”视图精简，核心关注 AppScope（全局配置）、entry/ets（代码区）、resources（资源区）。
核心配置文件中，app.json5（全局标识）、module.json5（模块配置）、pages（页面存放）是日常开发高频接触的部分，不需要死记硬背当前只需了解。
工具支持中文界面切换和智能代码提示，可大幅降低新手学习成本。
新建页面和工具类的操作是基础技能，需熟练掌握以提升开发效率。

【下节预告】

ArkTS变量声明（let/const）、基本数据类型（string/number/boolean）及类型注解的使用方法，理解强类型语言特性，为编写业务逻辑打下基础。

六、鸿蒙开发者学习与认证指引

（一）、官方学习班级报名（免费）

班级链接：HarmonyOS赋能资源丰富度建设（第四期）
学号填写规则：填写个人手机号码即可完成班级信息登记

（二）、HarmonyOS应用开发者认证考试（免费）

考试链接：HarmonyOS开发者能力认证入口
认证等级及适配人群
- 基础认证：适配软件工程师、移动应用开发人员，需掌握HarmonyOS基础概念、DevEco Studio基础使用、ArkTS及ArkUI基础开发等能力；
- 高级认证：适配项目经理、工程架构师，需掌握系统核心技术理念、应用架构设计、关键技术开发及应用上架运维等能力；
- 专家认证：适配研发经理、解决方案专家，需掌握分布式技术原理、端云一体化开发、跨端迁移及性能优化等高级能力。
认证权益：通过认证可获得电子版证书以及其他专属权益。

posted @ 2025-12-07 16:52 鸿蒙-散修阅读(3) 评论(0) 收藏举报

刷新页面返回顶部