HarmonyOS培训第二课作业

资料:组件​​​​​​参考文档导读-参考文档导读-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-animatordivider、search、menu、chart
容器组件 div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog
媒体组件 video
画布组件 canvas

(1)chart组件的使用

  1. 创建 pages.chart 文件夹,包含 chart.hml、chart.js、chart.css 三个文件。
  2. 配置路由,在 config.json 这个文件里面。

HarmonyOS培训第二课作业

3.pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index,否则的话会出现预览错误。

HarmonyOS培训第二课作业

PS:小窍门,绝对路径输入没有路径自动补全提示,可以使用「相对路径」选择到对应的文件,然后,在去掉前面的相对路径引入。

当然,如果在同一个文件夹内部,官方文档介绍使用相对路径不会出现 webpack 打包解析找不到文件的问题,所以,在同一个文件夹内部引用,使用相对路径即可。

4.ES6 Model 数据文件 import 导入只能使用相对路径,不能使用绝对路径,使用绝对路径会报错。

HarmonyOS培训第二课作业

这是主要参数介绍

(2)image-animator组件介绍

image-animator 是图片帧动画播放器

1.创建一个新的 Ablity 

HarmonyOS培训第二课作业

2.打开 pages.index.index.hml 启动预览器,对页面进行预览

3.在阿里图标库内下载 5 张心形图片,5 张图片需要注意对应不同的大小。

iconfont-阿里巴巴矢量图标库

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

HarmonyOS培训第二课作业

(5)inputHarmonyOS培训第二课作业

HarmonyOS培训第二课作业 

(6)text

HarmonyOS培训第二课作业

 

 

上一篇:华为 HarmonyOS 的野心比你想象中更大,android小游戏源代码


下一篇:鸿蒙系统生态开发分应用和设备开发