3.【鸿蒙应用开发实战: 从入门到精通】开发入门 Hello World

1.1 前言

上篇博文【2.【鸿蒙应用开发实战: 从入门到精通】开发环境搭建】我们已经学习了如何在windows 系统或Mac系统上安装HarmonyOS应用开发工具DevEco Studio。

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

本文参考官方一手学习资料：开发入门：Hello World

1.2 创建一个新项目

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

1.2.1 打开DevEco Studio

1.2.2 点击 Create Project 创建项目

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

• 如果当前未打开任何工程，可以在DevEco Studio的欢迎页，选择Create Project开始创建一个新工程。
  
• 如果已经打开了工程，可以在菜单栏选择File > New > Create Project来创建一个新工程。

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

5. 由于我们是第一次学习，暂时保持全部默认即可，当然如果有需要也可以改下项目名称或代码保存路径。

注意事项：

• 检查Bundle name和Save location是否与命名一致
  • 一般会根据Project name自行更新
  • 也可以根据需要自行更改。
• DevEco Studio会默认勾选除Car和TV以外的全部Device type，保持该选项即可。
• 鸿蒙应用开发设备类型详解：phone, tablet, 2in1, car, wearable, TV

设备类型 (Device Type)	英文名 / 关键字	典型设备举例	屏幕与交互特点	开发关注点与典型场景
手机	phone	华为Mate系列、P系列手机	中等尺寸屏幕（5-7英寸），触摸为主，便携性强。	功能全面，交互密集。需适配深色模式、全面屏、手势导航等。是大多数应用的主战场。
平板	tablet	华为MatePad系列	大尺寸屏幕（~10英寸），触摸为主，支持手写笔和键盘。	信息密度更高，适合分栏、拖拽交互。需利用大屏幕优势设计多窗口、平行视界等功能。
二合一平板	2in1	华为MateBook E	屏幕尺寸与平板类似，但可作为笔记本电脑使用，通常带可拆卸键盘。	兼具平板和笔记本特性。需适配多种使用模式：触摸模式、键鼠模式。UI应能灵活切换。
车机	car	华为鸿蒙座舱	中控屏幕（多为横屏），语音交互优先，触控为辅。	驾驶安全第一。界面元素要大且简洁，减少操作步骤。深度集成语音助手，支持多用户、多设备无缝流转:cite[7]。
智能穿戴	wearable	华为WATCH GT系列、智能手环	小尺寸圆形/方形屏幕（~1.5英寸），触摸、按键、旋冠交互。	轻量化、即时性。应用需极度简洁，显示最关键信息（健康、通知）。功耗优化至关重要。
智慧屏	TV	华为智慧屏系列	超大尺寸屏幕（50+英寸），十英尺交互，遥控器、语音为主，新型智慧屏（如MateTV）支持更丰富的交互如悬浮触控、手写笔:cite[2]:cite[4]。	远距离、沉浸式体验。UI布局要简单、清晰，焦点导航逻辑是核心。适配视频播放、大字体、远场语音等场景，并探索游戏、教育等新交互场景:cite[2]:cite[4]:cite[6]。

6. 单击Finish，工具会自动生成示例代码和相关资源
7. 等待工程创建完成，创建后界面如下图所示。
   
8. 在Project导航栏中选中 entry -> src -> main -> ets -> pages -> Index.ets，即可看到初始创建项目的模板代码。

@Entry
@Component
struct Index {
  # 静态常量 
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      # 通过Text组件展示一段文本 
      Text(this.message)
        # Text组件定义了组件标识id为HelloWorld，用于唯一指定组件。
        .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%')
  }
}

• 其中，@Component装饰器装饰了struct关键字声明的数据结构Index。
• Index被@Component装饰后具备组件化的能力，通过实现build方法描述UI。
• @Entry装饰的@Component将作为UI页面的入口。
• 在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
• 界面由RelativeContainer相对布局容器作为根容器，RelativeContainer支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。
• Text(this.message): 通过Text组件展示一段文本
• 文本信息由@State装饰器装饰的状态变量message驱动。
• Text组件定义了组件标识id为HelloWorld，用于唯一指定组件。
• 定义字体大小fontSize取值为$r('app.float.page_text_font_size')资源类型；
• 定义文本的字体粗细fontWeight取值为Bold，即字体较粗。
• 字体大小等数据的值一般存储在/entry/src/main/resources/base/element/float.json文件下，可以按照上文page_text_font_size的方式保存至float.json文件中，并通过$r('app.float.xxx')进行资源引用。
• alignRules属性用于指定设置在相对容器中子组件的对齐规则，仅当父容器为RelativeContainer时生效，在这里定义Text组件横向居中和纵向居中。

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

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

10. 接下来我们尝试修改message内容为"Hi,极客星云"

@Entry
@Component
struct Index {
  @State message: string = 'Hi,极客星云';

  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%')
  }
}

1.3 遗留问题

PS: 理论上应该支持模拟器或使用华为设备进行真机测试的，这个已反馈给他们等待后面更新吧。

1.4 总结与开发建议

1. 资源查询与适配：在resources目录下使用media（图片/视频）、float（尺寸）、string（字符串）等限定词（如small, medium, large）来为不同设备提供差异化资源。

1.5 结束语

好了，到这里，我们基本上先对这个鸿蒙应用开发有一个整体的认识就行，下一节课我们详细讲解相关基础知识。