介绍

本节内容将帮助开发者学习如何构建一个全新的 HarmonyOS 应用，学习使用 DevEco Studio 创建新项目、使用预览器预览页面、了解基础组件如 Image、Text 等。

根据本教程【开发入门：Hello World】创建全新的项目。

根据教程中的提示使用 01_Resources 文件夹中的文件。

如果您想要自行探索，可以直接打开 01_Complete 文件夹中的项目并浏览代码。

您将学习使用 Text、Image 等常用组件、Swiper、Grid、List、Scroll 等可滑动组件，构造出第一个 HarmonyOS 页面。

项目文件下载

下载项目文件开始构建本项目，请根据以下步骤操作：

01_EnvironmentSetup.ziphttps://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtyManage/011/111/111/0000000000011111111.20240925100716.11320799293904120300461357333091:50001231000000:2800:7BE8F4C4F0756185D85860E9C2D2661FFEAFB2407A423E5F5FD205E8C1C6B31B.zip?needInitFileName=true

 创建一个新项目

使用 DevEco Studio 创建一个空项目，了解 ArkUI 模板代码和预览器的使用方法。

Step 1

• 搭建开发环境：

• 安装 DevEco Studio，详情请参考下载和安装软件。

• 下载软件

• 请前往下载中心，登录华为账号后下载 DevEco Studio，并根据下载中心页面工具完整性指导进行完整性校验。

• 
  

• 设置 DevEco Studio 开发环境，DevEco Studio 开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考配置代理。

安装 DevEco Studio

Windows 环境

运行环境要求

为保证 DevEco Studio 正常运行，建议电脑配置满足如下要求：

• 操作系统：Windows10 64 位、Windows11 64 位

• 内存：16GB 及以上

• 硬盘：100GB 及以上

• 分辨率：1280*800 像素及以上

安装 DevEco Studio

• 下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入 DevEco Studio 安装向导。在如下界面选择安装路径，默认安装于 C:\Program Files 路径下，也可以单击浏览（B）...指定其他安装路径，然后单击 Next。

• 在如下安装选项界面勾选 DevEco Studio 后，单击 Next，直至安装完成。

• 安装完成后，单击 Finish 完成安装。

说明

1. DevEco Studio 提供开箱即用的开发体验，将 HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化 DevEco Studio 安装配置流程。

   HarmonyOS SDK 已嵌入 DevEco Studio 中，无需额外下载配置。HarmonyOS SDK 可以在 DevEco Studio 安装位置下 DevEco Studio\sdk 目录中查看。如需进行 OpenHarmony 应用开发，可通过 Settings > OpenHarmony SDK 页签下载 OpenHarmony SDK。

macOS 环境

运行环境要求

为保证 DevEco Studio 正常运行，建议电脑配置满足如下要求：

• 操作系统：macOS(X86) 11/12/13/14 macOS(ARM) 12/13/14

• 内存：8GB 及以上

• 硬盘：100GB 及以上

• 分辨率：1280*800 像素及以上

安装 DevEco Studio

1. 在安装界面中，将“DevEco-Studio.app”拖拽到“Applications”中，等待安装完成。

1. 安装完成后，接下来请根据配置代理，检查和配置开发环境。

2. DevEco Studio 提供开箱即用的开发体验，将 HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化 DevEco Studio 安装配置流程。

   HarmonyOS SDK 已嵌入 DevEco Studio 中，无需额外下载配置。HarmonyOS SDK 可以在 DevEco Studio 安装位置下 DevEco Studio\sdk 目录中查看。如需进行 OpenHarmony 应用开发，可通过 DevEco Studio > Preferences > OpenHarmony SDK 页签下载 OpenHarmony SDK。

诊断开发环境

为了您开发应用/元服务的良好体验，DevEco Studio 提供了开发环境诊断的功能，帮助您识别开发环境是否完备。您可以在欢迎页面单击 Diagnose 进行诊断。如果您已经打开了工程开发界面，也可以在菜单栏单击 Help > Diagnostic Tools > Diagnose Development Environment 进行诊断。

DevEco Studio 开发环境诊断项包括电脑的配置、网络的连通情况、依赖的工具是否安装等。如果检测结果为未通过，请根据检查项的描述和修复建议进行处理。

启用中文化插件

• 单击 File > Settings（macOS 为 DevEco Studio > Preferences ） > Plugins，选择 Installed 页签，在搜索框输入“Chinese”，搜索结果里将出现 Chinese(Simplified)，在右侧单击 Enable，单击 OK。

• 在弹窗中单击 Restart，重启 DevEco Studio 后即可生效。

Step 2

打开 DevEco Studio，通过如下两种方式，打开工程创建向导界面：

如果当前未打开任何工程，可以在 DevEco Studio 的欢迎页，选择 Create Project 开始创建一个新工程。

如果已经打开了工程，可以在菜单栏选择 File > New > Create Project 来创建一个新工程。

Step 3

点击 Create Project 按钮后，跳转至 Create Project 页面，左侧可以选择创建应用或创建元服务。这里选择创建应用 Application。选择 Empty Ability 模板，然后单击 Next，进入配置界面。

Step 4

将 Project name 自定义为 QuickStart。

检查 Bundle name 和 Save location 是否与命名一致，一般会根据 Project name 自行更新，也可以根据需要自行更改。

选择 Compatible SDK 为 5.0.0(12)，在编译构建时，DevEco Studio 会根据指定的 Compatible SDK 版本进行编译打包。

其中，Compatible SDK 需要跟随版本变化变更选择。

DevEco Studio 会默认勾选除‘Car’以外的全部 Device type，保持该选项即可。

Step 5

单击 Finish，工具会自动生成示例代码和相关资。

等待工程创建完成，创建后界面如右图所示。

@Entry@Componentstruct Index {  @State message: string = 'Hello World';
  build() {    RelativeContainer() {      Text(this.message)        .id('HelloWorld')        .fontSize($r('app.float.page_text_font_size'))        .fontWeight(FontWeight.Bold)        .alignRules({          center: { anchor: '__container__', align: VerticalAlign.Center },          middle: { anchor: '__container__', align: HorizontalAlign.Center }        })        .onClick(() => {          this.message = 'Welcome';        })    }    .height('100%')    .width('100%')  }}

Step 6

在 Project 导航栏中选中 entry -> src -> main -> ets -> pages -> Index.ets，即可看到初始创建项目的模板代码。

其中，@Component 装饰器装饰了 struct 关键字声明的数据结构 Index。Index 被 @Component 装饰后具备组件化的能力，通过实现 build 方法描述 UI。

@Entry 装饰的 @Component 将作为 UI 页面的入口。在单个 UI 页面中，最多可以使用 @Entry 装饰一个自定义组件。

界面由 RelativeContainer 相对布局容器作为根容器，RelativeContainer 支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。

通过 Text 组件展示一段文本

文本信息由 @State 装饰器装饰的状态变量 message 驱动。

Text 组件定义了组件标识 id 为 HelloWorld，用于唯一指定组件。

定义字体大小 fontSize 取值为 50；定义文本的字体粗细 fontWeight 取值为 Bold，即字体较粗。

alignRules 属性用于指定设置在相对容器中子组件的对齐规则，仅当父容器为 RelativeContainer 时生效，在这里定义 Text 组件横向居中和纵向居中。

Step 7

开启右边栏的 Previewer，预览器将工程中的 @Entry 作为实现入口，自动实现预览。

此处需要选中 @Entry 所在的文件，预览器才能顺利打开。

Step 8

修改 APP 的名称为“HMOS 世界入门版”。修改 entry/src/main/resources/base/element/string.json 文件，将 EntryAbility_label 的 value 修改为“HMOS 世界入门版”。

Step 9

修改 APP 的图标。将 01_Resources 文件夹中的 background.png 和 foreground.png 图片进行复制粘贴到 entry/src/main/resources/base/media 文件夹中，将其中原本的 background.png 和 foreground.png 文件替换掉。

结语

本节内容详细介绍了如何从零开始构建一个全新的 HarmonyOS 应用。通过使用 DevEco Studio 创建项目、熟悉预览器功能以及掌握基础组件的使用，开发者可以快速上手 HarmonyOS 开发。

项目中涵盖了 Text、Image 等常用组件，以及 Swiper、Grid、List、Scroll 等可滑动组件的实践，帮助开发者构建完整的 HarmonyOS 页面。

快速开始

• 下载项目文件（01_EnvironmentSetup.zip），按照教程步骤搭建开发环境。

• 使用 DevEco Studio 创建新项目，熟悉 ArkUI 模板代码和预览器的操作。

• 替换资源文件（如 APP 图标和名称），定制化应用界面。

深入学习

• 直接查看 01_Complete 文件夹中的完整项目代码，进一步探索组件用法。

• 尝试修改组件属性或布局方式，体验 HarmonyOS 的灵活开发模式。

通过本教程，开发者能够掌握 HarmonyOS 应用开发的核心流程，为后续更复杂的项目奠定基础。