小支同学的学习笔记《HarmonyOS应用开发入门——章节一：使用常见组件构建页面》

企业开发 2025-04-11 19:32:27 阅读次数: 0

介绍

本节内容将帮助开发者学习如何构建一个全新的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完成安装。

说明
- 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

在安装界面中，将“DevEco-Studio.app”拖拽到“Applications”中，等待安装完成。
安装完成后，接下来请根据配置代理，检查和配置开发环境。

说明
- 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
@Component
struct 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%')
  }
}