纯血鸿蒙开发入门：2.展示hello world

恭喜你完成了开发环境的搭建！现在，让我们开始你的第一个纯血鸿蒙应用之旅，创建一个简单的“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 的结构，其中 Row 和 Column 是布局组件，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 的世界。