鸿蒙第一课

一、关于鸿蒙

1.技术架构

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

2.应用层介绍

①应用层包括「系统应用」和「第三方非系统应用」。应用由一个或多个FA(Feature Ability)或PA(ParticleAbility)组成。其中，FA有Ul界面，提供与用户交互的能力;而PA无UI界面，提供后台运行任务的能力以及统一的数据访问抽象。基于 FA/PA开发的应用，能够实现特定的业务功能，支持跨设备调度与分发，为用户提供一致、高效的应用体验。显然，我们前端领开发小干伙伴学习的核心点就在于对FA中 UI层面的开发工作。

②UI部分(FA）既支持纯JavaScript 开发，也支持纯Java开发，还可以 Java跟JavaScript混合开发。FA支持使用Java和JavaScript 两种方式开发UI界面。如果使用Java，则跟 Android一样，使用xml定义布局或者Java代码定义布局，每个页面都是一个 PageAbility，使用Java编写业务代码，不同的页面之间传递数据依然使用intent。

二、开发目录结构

①.hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。
②.css 结尾的CSS样式文件，这个文件用于描述页面样式。

③.js结尾的文件，这个文件用于处理页面和用户的交互

各个文件夹的作用：

app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。

pages 目录用于存放所有组件页面。

common 目录用于存放公共资源文件，比如：媒体资源和 JS 文件。

i18n 目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源，注意 i18n 是开发保留文件夹，不可重命名。

三、HelloWorld体验

1.  打开“index.hml”文件，添加一个文本和一个按钮，示例代码如下：

         Hello World            

2.  打开“index.css”文件，设置文本和按钮的样式，示例代码如下：

/* index.css */.container {    flex-direction: column; /* 设置容器内的项目纵向排列 */    justify-content: center; /* 设置项目位于容器主轴的中心 */    align-items: center; /* 项目在交叉轴居中 */    width:100%;    height:100%;}/* 对class="text"的组件设置样式 */.text {    font-size: 42px;}/* 对class="button"的组件设置样式 */.button {    width: 240px;    height: 60px;    background-color: #007dff;    font-size: 30px;    text-color: white;    margin-top: 20px;}

3.使用预览器或模拟器运行项目，效果如下图所示：