资料：组件参考文档导读-参考文档导读-HarmonyOS应用开发
在工程目录中：i18n下存放多语言的json文件；common.images下存放工程中使用的图片资源文件；pages文件夹下存放多个页面，每个页面由hml、css和js文件组成。
- main > js > default > i18n > en-US.json：此文件定义了在英文模式下页面显示的变量内容。
- main > js > default > i18n >zh-CN.json：此文件定义了在中文模式下页面显示的变量内容。
- main > js > default > pages.index > index.hml：此文件定义了index页面的布局、index页面中用到的组件，以及这些组件的层级关系。
- main > js > default > pages.index > index.css：此文件定义了index页面的样式。
- main > js > default > pages.index > index.js：此文件定义了index页面的业务逻辑，比如数据绑定、事件处理等。
组件介绍
组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。
| 组件类型 | 主要组件 |
|---|---|
| 基础组件 | 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 |
（1）chart组件的使用
- 创建 pages.chart 文件夹，包含 chart.hml、chart.js、chart.css 三个文件。
- 配置路由，在 config.json 这个文件里面。
3.pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。
PS：小窍门，绝对路径输入没有路径自动补全提示，可以使用「相对路径」选择到对应的文件，然后，在去掉前面的相对路径引入。
当然，如果在同一个文件夹内部，官方文档介绍使用相对路径不会出现 webpack 打包解析找不到文件的问题，所以，在同一个文件夹内部引用，使用相对路径即可。
4.ES6 Model 数据文件 import 导入只能使用相对路径，不能使用绝对路径，使用绝对路径会报错。
这是主要参数介绍
（2）image-animator组件介绍
image-animator 是图片帧动画播放器
1.创建一个新的 Ablity
2.打开 pages.index.index.hml 启动预览器，对页面进行预览
3.在阿里图标库内下载 5 张心形图片，5 张图片需要注意对应不同的大小。
4.在 index.hml 文件中导入对应的页面结构代码
5.导入 css 样式文件
6.设置图片文件 data model 并 export 出来 common.datas.imgs.js
7.在 index.js 文件中导入图片模块，并写入相应逻辑，需要注意的是使用 $ref 获取到当前动画的节点对象。然后调用其对应的方法。
8.图片无法正常显示，相对路径无法查找到文件位置，是因为 index.js 引入模块后，相对路径发生了变化，修改对应的路径。
图片截取时应该使爱心的大小不同
（3）div（容器组件）
flex-direction
- column：垂直方向从上到下。
- row：水平方向从左到右。
flex-wrap
- nowrap：不换行，单行显示。
- wrap：换行，多行显示。
（4）button
（5）input
（6）text