恭喜你完成了开发环境的搭建!现在,让我们开始你的第一个纯血鸿蒙应用之旅,创建一个简单的“Hello World”项目。这个过程将帮助你熟悉 DevEco Studio 的基本操作、项目结构以及 ArkUI 的基本组件。

1. 创建新项目

打开 DevEco Studio,选择 "Create Project"(创建项目)。

  • 选择模板: 在模板列表中,选择 "Empty Ability"(空 Ability)模板。这是最基础的应用模板,适合初学者入门。

  • 项目配置:

    • Project name(项目名称): 输入你的项目名称,例如 "MyFirstApp"。

    • Bundle name(包名): 包名是应用的唯一标识符,通常采用反向域名格式,例如 "com.example.myfirstapp"。

    • Save location(保存位置): 选择项目在本地的保存路径。

    • Device type(设备类型): 选择 "Phone"(手机)。

    • SDK: 确保选择了正确的纯血鸿蒙 SDK 版本。

点击 "Finish"(完成),DevEco Studio 会自动为你生成项目文件。

2. 认识项目结构

项目创建完成后,你会看到一个项目文件夹。其中几个重要的目录和文件是:

  • entry 目录: 这是你的主模块,包含了应用的入口代码和资源。

  • src/main/ets 目录: 这是编写 ArkTS 代码的地方。

    • entryability 目录: 包含应用的入口 Ability。

    • pages 目录: 包含了应用的页面文件。

      • Index.ets 这是自动生成的第一个页面文件,我们将在这里编写 UI 代码。

  • resources 目录: 存放应用的图片、字符串、布局等资源文件。

3. 编写 Hello World 代码

打开 src/main/ets/pages/Index.ets 文件。你会看到一些自动生成的代码。ArkUI 使用声明式 UI 范式,界面由组件构建。

// Index.ets

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

这段代码很简单:

  • @Entry 装饰器标识了这个组件是页面的入口。

  • @Component 装饰器定义了一个自定义组件 Index

  • @State 装饰器声明了一个状态变量 message,当它的值改变时,UI 会自动更新。

  • build() 函数描述了 UI 的结构,其中 RowColumn 是布局组件,Text 是显示文本的组件。

现在,你已经创建了一个简单的“Hello World”界面。

4. 运行你的应用

  • 选择设备: 在 DevEco Studio 的工具栏中,选择一个模拟器或连接好的真机设备。

    快速连接命令: 
    "C:\Program Files\Huawei\DevEco Studio\
    sdk\default\openharmony\toolchains\hdc.exe" tconn ip:33237

  • 点击运行: 点击工具栏上的“运行”按钮(或使用快捷键 Shift+F10),DevEco Studio 会编译并安装你的应用。

  • 查看结果: 应用成功运行后,你会在模拟器或真机上看到一个居中显示的“Hello World”文本。

通过这个简单的练习,你已经掌握了鸿蒙应用开发的基本流程。接下来,你可以尝试修改文本内容、改变字体大小,或添加新的组件来进一步探索 ArkUI 的世界。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐