目录
一、鸿蒙系统简介
（2）OpenHarmony 技术架构
（3）OpenHarmony 应用层介绍
（2）hello world 应用体验
(2）文件使用规则
2.媒体文件格式
3.app.js 标签中包含了实例名称、页面路由信息。
4.每个应用可以在 app.js 自定义应用级生命周期的实现逻辑
四、基础组件介绍及chart 组件使用
（1）鸿蒙系统组件介绍
（2）chart 组件体验使用
（2）image-animator 图片帧动画播放器实现
正文
一、鸿蒙系统简介
（1）鸿蒙系统 OpenHarmony 又来
OpenHarmony 中文意思「开放、和谐」，代表了中华民族的包容和谦和，是咱们中国在移动端底层操作系统领域迈出的巨大一步，从此，在全世界我们可以说：“中国，也有自己的移动端底层操作系统了！”
鸿蒙 OpenHarmony 开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。
（2）OpenHarmony 技术架构
OpenHarmony 整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的组件，前端领域的发力点核心在于应用层「拓展应用、三方应用」构建服务。
（3）OpenHarmony 应用层介绍
应用层包括「系统应用」和「第三方非系统应用」。应用由一个或多个 FA（Feature Ability）或 PA（Particle Ability）组成。其中，FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象。基于 FA/PA 开发的应用，能够实现特定的业务功能，支持跨设备调度与分发，为用户提供一致、高效的应用体验。显然，我们前端开发小伙伴学习的核心点就在于对 FA 中 UI 层面的开发工作。
UI 部分（FA）既支持纯 JavaScript 开发，也支持纯 Java 开发，还可以 Java 跟 JavaScript 混合开发。FA 支持使用 Java 和 JavaScript 两种方式开发 UI 界面。如果使用 Java，则跟 Android 一样，使用 xml 定义布局或者 Java 代码定义布局，每个页面都是一个 PageAbility，使用 Java 编写业务代码，不同的页面之间传递数据依然使用 intent。
而这里如果使用 JavaScript UI 框架的话，那么写法跟 「Vue + 小程序」 应用开发基本一模一样，同样支持 data、props、computed、watch 和 functions（methods），也能创建自定义的组件，这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师，不得不说华为在已有概念上做的整合，还是相当厉害的。
- HTML 基础
- CSS 基础
- JavaScript 、ECMAScript（ES6） 基础
- Vue 基础
- 小程序开发基础（事半功倍）
二、开发环境搭建和 HelloWorld 体验
（1）DevEco Studio 开发环境搭建
DevEco Studio： HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者
（2）hello world 应用体验
第一步：启动应用后，提示是否创建启动程序脚本，方便后续模板选择。
第二步：使用华为云 npm 包管理工具。
第三步：创建 or 导入项目。
第四步：选择项目类型及模板。
为了满足应用在多设备上运行的开发需求，DevEco Studio 2.1 Release 在原有单设备工程模板的基础上，新增了 11 个跨设备工程模板。开发者可根据工程向导，依次挑选模板和设备类型，轻松创建跨设备工程，自动生成示例代码和相关资源。
第五步：创建工程项目。
第六步：查阅并关闭开发简易提示。
第七步：项目自动下载对应的依赖及文件，这一步直接点击运行则会有错误提示。
第八步：在 DevEco Studio 菜单栏，点击Tools > SDK Manager 配置对应的 SDK 版本。
第九步：点击右上角 sign in 登陆华为账号，请输入已实名认证的华为帐号的用户名和密码进行登录，在网页中登陆成功后，完成授权。
第十步：进入到 src/main/js/default/pages/index 页面，打开 view -> Tool Windows -> Previewer 进行预览。
第十一步：进入 Tools -> Devices Manager 看到模拟器管理页面，这一步必须要实名认证的华为账号进行登录后，即可选择对应的设备，然后启动设备。
第十二步：启动设备后，再次点击 绿色运行按钮，即可在仿真设备上运行该项目。
PS：在 Views 可以快速设置编辑器主题，以及对应的开发设置。
三、应用开发目录结构及文件使用规则介绍
(1) 应用开发目录
JS FA 应用的 JS 模块 (entry/src/main/js/module) 的典型开发目录结构如下：
目录结构中文件分类如下：
- .hml 结尾的 HML 模板文件，这个文件用来描述当前页面的文件布局结构。
- .css 结尾的 CSS 样式文件，这个文件用于描述页面样式。
- .js 结尾的 JS 文件，这个文件用于处理页面和用户的交互。
各个文件夹的作用：
- app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。
- pages 目录用于存放所有组件页面。
- common 目录用于存放公共资源文件，比如：媒体资源和 JS 文件。
- i18n 目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源，注意 i18n 是开发保留文件夹，不可重命名。
(2）文件使用规则
1.文件访问规则
应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以 "/" 开头，相对路径以 "./" 或 "../" ，具体访问规则如下：
- 引用代码文件，需使用相对路径，比如：../common/utils.js。
- 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。
- 公共代码文件和资源文件推荐放在 common 下，通过以上两条规则进行访问。
- CSS 样式文件中通过 url() 函数创建 数据类型，如：url(/common/xxx.png)。
- 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
- 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。
2.媒体文件格式
| 格式 | 支持版本 | 支持的文件类型 |
| BMP | API Version 3+ | .bmp |
| JPEG | API Version 3+ | .jpg |
| PNG | API Version 3+ | .png |
3.app.js 标签中包含了实例名称、页面路由信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 |
| name | string | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息，详见“pages”。 |
name、pages 标签配置需在配置文件中的 js 标签中完成设置。pages 定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：
{ ... "pages": [ "pages/index/index", "pages/detail/detail" ] ...}
说明
- 应用首页固定为 "pages/index/index"。
- 页面文件名不能使用组件名称，比如：text.hml、button.hml 等。
4.每个应用可以在 app.js 自定义应用级生命周期的实现逻辑
包括：
- onCreate：在应用生成时被调用的生命周期函数。
- onDestory：在应用销毁时被调用的生命周期函数。
