正文
四、基础组件介绍及chart 组件使用
（1）鸿蒙系统组件介绍
- 组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。
- 鸿蒙 JS API 提供了完善的组件介绍，详细情况我们去查阅一下官方文档： 组件 - 官方介绍
- 根据组件的功能，可以分为以下四大类：
| 组件类型 | 主要组件 |
| 基础组件 | text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart |
| 容器组件 | div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog |
| 媒体组件 | video |
| 画布组件 | canvas |
（2）chart 组件体验使用
鸿蒙系统组件相较于其他前端组件仓库，给咱们专门封装了一个 chart 组件，图表组件，用于呈现线形图、柱状图、量规图界面。
使用 chart 组件进行体验，具体执行步骤如下：
- 创建 pages.chart 文件夹，包含 chart.hml、chart.js、chart.css 三个文件。
- 配置路由，在 config.json 这个文件里面。
3.预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。
4.切换页面进行预览，不需要重新启动预览器，直接点击右上角刷新按钮即可，出现错误提示。
5. pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。
6.出现预览错误修改后，刷新无效，必须重新启动预览器才能正常显示，点击右侧收起再展开即可。
7.图片路径引用失败不会出现文件查找失败错误提示，建议使用绝对路径进行文件路径编码，官方文档介绍在输出 hap 文件后，真机会因为 webpack 打包解析出现找不到文件的问题，不过模拟器是正常的。
PS：小窍门，绝对路径输入没有路径自动补全提示，可以使用「相对路径」选择到对应的文件，然后，在去掉前面的相对路径引入。
当然，如果在同一个文件夹内部，官方文档介绍使用相对路径不会出现 webpack 打包解析找不到文件的问题，所以，在同一个文件夹内部引用，使用相对路径即可。
8.ES6 Model 数据文件 import 导入只能使用相对路径，不能使用绝对路径，使用绝对路径会报错。
9. 使用模拟器进行模拟的时候，编辑器工具会自动打包输出 hap 文件，模拟器直接加载运行该文件，模拟器不支持热更新，预览器预览会输出编译后文件，支持热更新，也支持多设备同时预览。
10. 调整 chart 组件的相关参数，需要注意 xAxis 的 axisTick 参数设置过小，会出现数据丢失情况。
五、使用 image-animator 组件构建多图帧动画
（1）image-animator 图片帧动画播放器介绍
（1）image-animator 图片帧动画播放器介绍
image-animator 图片帧动画播放器，多图帧动画的构建能力一直以来都是基于 Android 安卓系统使用 Java or C#语言进行开发的，而华为鸿蒙系统将「图片帧动画播放器」引入到了 JS 前端开发领域，这无疑是一次巨大的突破，这也代表着华为鸿蒙系统对其图片渲染能力的巨大自信。
「属性、事件、样式、方法」组件四要素，
官方文档介绍
（2）image-animator 图片帧动画播放器实现
1.创建一个新的 Ablity ，新起一个抽象能力的应用服务，不同的 Ablity 之间可以通过 PA 进行调用。
Ablity 是应用所具备能力的抽象，也是应用程序的重要组成部分。Ablity 由一个或多个 FA（Feature Ability）或 PA（Particle Ability）组成。其中，FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象。
2. 配置 Ability 对应的基础参数
3. 打开 pages.index.index.hml 启动预览器，对页面进行预览，输出基础 "你好 世界" 页面。
4.在阿里图标库内下载 5 张心形图片，5 张图片需要注意对应不同的大小。
阿里巴巴图标库：https://www.iconfont.cn/search/index?searchType=icon&q=heart
5.在 index.hml 文件中导入对应的页面结构代码
6. 导入 css 样式文件
7.设置图片文件 data model 并 export 出来 common.datas.imgs.js
8. 在 index.js 文件中导入图片模块，并写入相应逻辑，需要注意的是使用 $ref 获取到当前动画的节点对象。然后调用其对应的方法。
9. 图片无法正常显示，相对路径无法查找到文件位置，是因为 index.js 引入模块后，相对路径发生了变化，修改对应的路径 。
10.图片动画并未出现，为什么呢？因为图片的渲染机制是直接更改到对应的大小，所以，我们需要保证心形在图片中占有的位置，使用截图工具截图后，终于出现了心形跳动的结果。
视频学习网站：
鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili
文档学习网站：
技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结
