【HarmonyOS】第一讲——HarmonyOS概述与Flex布局

[软件部-陈奕铿]

目录

• 写在前面
• HarmonyOS概述
• HarmonyOS系统定义
• 内核层
• 系统服务层
• 框架层
• 应用层
• HarmonyOS技术特性
• 硬件互助，资源共享关键技术
• 分布式软总线
• 分布式设备虚拟化
• 分布式数据管理
• 分布式任务调度
• 一次开发，多端部署
• 统一 OS，弹性部署
• HarmonyOS与OpenHarmony
• DevEco Studio的安装与使用
• 工程目录简介
• Flex布局
• flex-direction属性
• flex-wrap属性
• justify-content属性
• align-items属性
• align-content属性
• flex-grow属性
• flex-shrink属性
• align-self属性
• 代码示例
• 总结

写在前面

大家好，非常感谢大家愿意参与开放原子开源极客社 HarmonyOS的学习，也非常感谢大家赏脸看我自己写的教程。那为啥不像AL一样，直接布置任务，让大家在网上找资源学习呢？难道网上没有HarmonyOS的教程吗？

其实有，但没完全有。

目前根据HarmonyOS 的SDK版本，可以采用三种语言，一是Java，一是类似html的格式（HarmonyOS里面叫做HML，和html有点不同），还有一种叫ArkTS，文件后缀叫做ets，是华为自己整的一套语言。网上的教程和资源最主要都是java以及ArkTS的版本，甚至黑马都只出了这两个版本的教程。至于HML，无论是论坛，还是第三方教程，或者单纯的分享帖子，都少得可怜。当时做项目的时候一天天在各大网站上扒拉零星的资料，和华为鸿蒙工程师斗智斗勇，既费时又费力。那几天队友们都回家放假了，我还在学校埋头苦干，甚至因为做不出来，开始怀疑这个项目的可行性了（不过有一部分确实是自己太蠢了，这里强调一下交流的重要性）。因此，借着开源社团的渠道，我想自己整一个HML的教程，至少让大家入门可以稍微简单一些。至于我怎么会的，我大一的时候，参加了一个鸿蒙的微专业，不过今年好像没有了，不然真的推荐去报个名。

问题来了。为什么我没有教其他两个语言的呢？

几个原因：第一，这两个版本的教程网上很完备了，如果大家想学其他两种，可以自己去跟着黑马的教程去学。第二，由于面向的是原先算法组的同学，有可能在后面做项目的时候，会负责一些前端的东西。由于HML和H5C3相似，即使你们用不到鸿蒙的东西，也可以比较快上手H5C3。

OK，在开始之前，我再交代几件事情：

1. 如果想要学习Java版本的或者ArkTS版本的鸿蒙，可以参考黑马程序员的视频，这里更推荐后者，因为最新版的SDK里头只剩ArkTS了，资料也是最新的。换句话说，最新的SDK已经淘汰掉Java和js了。
2. 由于鸿蒙是华为干出来的，所以官方文档是中文的。在学习或者是做项目的时候，官方文档是一定要用的，而且非常频繁，有些时候想玩一点花的，也可以挨个把官方文档里的组件拿来耍哈哈哈。
3. 遇到不大懂的东西，可以去官方论坛或者51cto这个论坛看看。CSDN也行，不过内容偏少。还有一个叫做木棉花HOS的社团，这是数院那边专门做鸿蒙的社团，也是全国第一个校园鸿蒙组织，非常厉害。大家可以学习一下他们的案例。
4. 如果碰到一些技术难点，没办法直接通过官方文档、论坛或者社区找到答案，可以尝试给华为在线提单，直接跟官方工程师交流。
5. 作为一个从算法组跑出来开发鸿蒙的人，我是站在一个原本对前后端毫无了解的学习者的角度上编写这些内容的，比较适合前后端基础薄弱的同学学习，如果基础比较好，只需要对着开发文档猛读就好啦。

OK，祝大家学习愉快~

写于2024.3.8

本讲要点： 了解HarmonyOS概念，完成DevEco Studio的安装与使用，了解工程目录，学习Flex布局

HarmonyOS概述

这个部分大家稍微了解一下即可，对后面的开发影响不大。

HarmonyOS系统定义

HarmonyOS整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统>子系统>功能/模块”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的子系统或功能/模块。

内核层

内核层主要包括内核子系统和驱动子系统两个部分。

• 内核子系统：HarmonyOS 采用多内核设计，支持针对不同资源受限设备选用适合的 OS内核。内核抽象层 (KAL, Kernel Abstract Layer) 通过屏蔽多内核差异，对上层提供基础的内核能力，包括进程/线程管理、内存管理、文件系统、网络管理和外设管理等。
• 驱动子系统：硬件驱动框架 (HDF) 是 HarmonyOS 硬件生态开放的基础，提供统一外设访问能力和驱动开发、管理框架。
  

  

  系统服务层

  根据不同设备形态的部署环境，各个子系统集内部可以按子系统粒度裁剪，每个子系统内部又可以按功能粒度裁剪。
  

  

  框架层

  框架层为 HarmonyOS应用开发提供:
• 用户程序框架：支持Java/C/C++/JS等多种语言
• Ability框架：应用所具备能力的抽象
• 两种UI框架：适用于Java语言的 Java UI框架和适用于JS语言的JS UI框架
• 多语言框架API：支持多种软硬件服务对外开放的语言框架

根据系统的组件化裁剪程度， HarmonyOS设备支持的API也会有所不同。

应用层

应用层包括系统应用和第三方非系统应用。

• HarmonyOS 的应用由一个或多个 FA(Feature Ability) 或 PA (Particle Ability) 组成。
• FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象。
• FA 在进行用户交互时所需的后台数据访问也需要由对应的 PA 提供支撑。
• 基于 FA/PA 开发的应用，能够实现特定的业务功能，支持跨设备调度与分发，为用户提供一致、高效的应用体验。

HarmonyOS技术特性

硬件互助，资源共享关键技术

多种设备之间能够实现硬件互助、资源共享，主要依赖以下四个关键分布式技术。

分布式软总线

分布式软总线是手机、平板、智能穿戴、智慧屏、车机等分布式设备的通信基座，为设备之间的互联互通提供了统一的分布式通信能力，为设备之间的无感发现和零等待传输创造了条件。开发者只需聚焦于业务逻辑的实现，无需关注组网方式与底层协议。

分布式设备虚拟化

分布式设备虚拟化平台可以实现不同设备的资源融合、设备管理、数据处理，多种设备共同形成一个超级虚拟终端。针对不同类型的任务，为用户匹配并选择能力合适的执行硬件，让业务连续地在不同设备间流转，充分发挥不同设备的能力优势，如显示能力、摄像能力、音频能力、交互能力以及传感器能力等。

分布式数据管理

用户数据不再与单一物理设备绑定，业务逻辑与数据存储分离，跨设备的数据处理如同本地数据处理一样方便快捷，让开发者能够轻松实现全场景、多设备下的数据存储、共享和访问，为打造一致、流畅的用户体验创造了基础条件。

分布式任务调度

分布式任务调度基于分布式软总线、分布式数据管理、分布式 Profile 等技术特性，构建统一的分布式服务管理（发现、同步、注册、调用）机制，支持对跨设备的应用进行远程启动、远程调用、远程连接以及迁移等操作，能够根据不同设备的能力、位置、业务运行状态、资源使用情况，以及用户的习惯和意图，选择合适的设备运行分布式任务。

一次开发，多端部署

HarmonyOS 提供了用户程序框架、Ability 框架以及 UI 框架，支持应用开发过程中多终端的业务逻辑和界面逻辑进行复用，能够实现应用的一次开发、多端部署，提升了跨设备应用的开发效率。

统一 OS，弹性部署

HarmonyOS 通过组件化和小型化等设计方法，支持多种终端设备按需弹性部署，能够适配不同类别的硬件资源和功能需求。支撑通过编译链关系去自动生成组件化的依赖关系，形成组件树依赖图，支撑产品系统的便捷开发，降低硬件设备的开发门槛。

• 支持各组件的选择（组件可有可无）：
  • 根据硬件的形态和需求，可以选择所需的组件。
• 支持组件内功能集的配置（组件可大可小）：
  • 根据硬件的资源情况和功能需求，可以选择配置组件中的功能集。例如，选择配置图形框架组件中的部分控件。
• 支持组件间依赖的关联（平台可大可小）：
  • 根据编译链关系，可以自动生成组件化的依赖关系。例如，选择图形框架组件，将会自动选择依赖的图形引擎组件等。

HarmonyOS与OpenHarmony

这一部分需要各位重点看一看。 因为HarmonyOS与OpenHarmony是两个非常重要的概念，虽然联系非常紧密（看名字也是），但是有本质的区别。之前打华为ICT大赛的时候，我有个其他队伍的同学就把HarmonyOS说成了OpenHarmony。（但是最后她们队进了决赛，我反倒没进，我很纳闷）

开放原子开源基金会（简称“基金会”）于 2020 年 9 月接受华为捐赠的智能终端操作系统基础能力相关代码，随后进行开源，并根据命名规则为该开源项目命名为 OpenAtom OpenHarmony（简称“OpenHarmony”）。

华为通过开源引入OpenHarmony开源项目，结合自研闭源应用和闭源HMS能力，构建华为自研产品的完整解决方案，即HarmonyOS。

其实用通俗一点的话来讲，OpenHarmony的诞生早于HarmonyOS，它其实算一个面向全场景的系统，你可以在很多开发板上面看到OpenHarmony的使用。HarmonyOS是华为基于前者的基础上，进一步商业化和产品化做出来的系统。HarmonyOS偏向北向应用开发，OpenHarmony偏向南向设备开发。

DevEco Studio的安装与使用

安装教程
当然你也可以查看其他帖子。

安装完成之后，我们点击文件->新建->新建项目，跳出窗口：

选择Empty Ability，点击Next。

• Project name：工程名字，可以自己设置
• Save location：保存地址，自己设置
• Compile SDK：选择API6，其实如果你自己多点点，可以发现SDK越高，Java和JS就会越来越少，最后只剩ArkTS了。
• Language：选择JS

点击Finish。这样你就成功创建了一个工程文件。

工程目录简介

这一部分，我会挑一些在未来开发工程时会接触到的部分目录来解释。后面在讲解过程中会涉及到每个部分的使用。

Flex布局

在这一部分，大家只需要先过一遍，等到需要的时候，随时回来查阅即可，大不了多换几个看看效果。

Flex布局又名“弹性布局”，用来为盒状模型提供最大的灵活性。

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。它的值可选项有：

• row（默认属性值）：水平方向从左到右。
• column：垂直方向从上到下。

flex-wrap属性

flex容器是单行还是多行显示，该值暂不支持动态修改。它的值可选项有：

• nowrap（默认值）：不换行，单行显示。
• wrap：换行，多行显示。

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。可选项有：

• flex-start（默认值）：项目位于容器的开头。
• flex-end：项目位于容器的结尾。
• center：项目位于容器的中心。
• space-between：项目位于各行之间留有空白的容器内。
• space-around：项目位于各行之前、之间、之后都留有空白的容器内。
• space-evenly: 均匀排列每个元素，每个元素之间的间隔相等。
  

  

  align-items属性

  flex容器当前行的交叉轴对齐格式，可选值为：
• stretch（默认值）：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
• flex-start：元素向交叉轴起点对齐。
• flex-end：元素向交叉轴终点对齐。
• center：元素在交叉轴居中。

align-content属性

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

• flex-start：所有行从交叉轴起点开始填充。
• flex-end：所有行从交叉轴末尾开始填充。
• center：所有行朝向容器的中心填充。
• space-between：所有行在容器中平均分布。
• space-around：所有行在容器中平均分布，相邻两行间距相等。
  

  

  flex-grow属性

  flex-grow属性定义布局容器内部的成员组件的放大比例，默认为0，即如果存在剩余空间，也不放大。
  

  

  flex-shrink属性

  设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩，默认值为1。
  

  

  align-self属性

  align-self属性允许单个项目有与其他项目不一样的对齐方式，父元素的align-items样式。默认继承父元素的align-items属性，如果没有父元素，则等同于stretch。仅在父容器为div、list中生效。可选值为：
• stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
• flex-start 元素向交叉轴起点对齐。
• flex-end 元素向交叉轴终点对齐。
• center 元素在交叉轴居中。
• baseline 元素在交叉轴基线对齐。

代码示例

说了一堆，我们用实例来进行举例。

首先对index页面下的三个文件进行解释：

• index .hml：这个文件主要通过使用不同的组件，设计前端界面。
• index .css： 这个文件是对hml文件中的组件进行修饰作用，主要是调整格式与内容。
• index .js：这个文件是相对于hml的后端文件，用于处理各种事件与数据处理。

由于是新建文件，没有做任何修改，所以我们这个时候点击界面右侧的预览器（下图右下角）

等待一会，弹出窗口如下：

这个预览器可以短时间生成当前页面的预览情况，便于短时间查看页面情况。点击右上角的回转图标可以刷新当前页面。点击第二行图标中的倒三角形图标可以更换设备。手机上方的几个按钮分别为返回、旋转设备以及更换深色模式。

现在请大家把三个文件分别修改成如下形式（比较方便入门）：
index.css：

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

index.hml：

<div class="container">
    <text class="title">
        您好，世界
    </text>
</div>

index.js：

export default {
    data: {
    },
    onInit() {
    }
}

然后再次点击刷新图标以刷新预览。

现在来解释一下以上代码：
我们先看hml文件。div是基础容器组件，用作页面结构的根节点或将内容进行分组。而text则是文本的基础组件，用于呈现一段信息。从缩进关系中我们可以看出来，text组件是包含在div基础组件中的。而class则表示组件的样式属性，我们可以通过class设置不同的类。

那么这个class有什么用呢？我们看到css文件中有div和text对应的class，即container与title。也就是说，我们可以通过class，在css文件中编写对应类的样式。大家可以点击一下，对应着官方API参考来理解每一个样式，推荐大家稍微改一改样式来看看效果。

我们再看js文件，data用来储存数据，onInit()则是页面启动时就执行的方法。目前空空如也，后面会用到。

我们现在随便改一下text中的内容：

<div class="container">
    <text class="title">
        我来自深圳大学
    </text>
</div>

刷新之后效果如下：

我们再试着改一改其他样式：

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: blue;
}

.title {
    font-size: 80px;
    text-align: start;
    width: 100%;
    height: 40%;
    margin: 10px;
}

我在container下增加了background-color样式，然后把text-align改成了start，再修改了title的font-size，即字体大小。效果如下：

问题来了，我可以在div里头再嵌套一些容器组件吗？

当然可以啊。我在class为container的div里头再添加了一个class为inside的div：

index.css：

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: blue;
}

.title {
    font-size: 80px;
    text-align: start;
    width: 100%;
    height: 40%;
    margin: 10px;
}

.inside{
    width:50%;
    height: 50%;
    background-color: yellow;
}

index.hml：

<div class="container">
    <text class="title">
        我来自深圳大学
    </text>
    <div class="inside">

    </div>
</div>

index.js 不做修改

效果如下：

有几点需要注意：

1. 一个页面的根组件一定是一个div。拿上面的例子而言，假如你想把text组件放到container外面是不行的，把inside放到container外面同样不行，必须是div，且只有一个。
2. 有些组件规定了相应的父组件或者子组件，使用上要注意。

   总结

   这一讲的内容主要是介绍HarmonyOS的概念，以及做一些前期的安装与对工程的初步了解。大家可以借这次机会多翻翻各类组件，熟悉一下各类样式的内容。这相对于后期的开发而言是非常重要的基础，既可以提升项目的开发速度，也可以达到自己想要的效果。