> 文档中心 > 【无标题】鸿蒙培训1

【无标题】鸿蒙培训1


 

1、基础组件介绍

组件类型 主要组件
基础组件 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

 

2、使用image-animator组件构建多图帧动画

注意:在此过程中要区分相对路径和绝对路径。

1.创建一个新的 Ablity ,新起一个抽象能力的应用服务,不同的 Ablity 之间可以通过 PA 进行调用。

2.配置 Ability 对应的基础参数。

3.打开 pages.index.index.hml 启动预览器,对页面进行预览,输出基础 "你好 世界" 页面。

4.在阿里图标库内下载 5 张心形图片,5 张图片需要注意对应不同的大小。(也可截取5张不同大小的图片即可)

5.在 index.hml 文件中导入对应的页面结构代码。

 

  • 6.导入 css 样式文件

     
    1. .container {

    2. flex-direction: column;

    3. justify-content: center;

    4. align-items: center;

    5. left: 0px;

    6. top: 0px;

    7. width: 454px;

    8. height: 454px;

    9. }

    10. .animator {

    11. width: 70px;

    12. height: 70px;

    13. }

    14. .btn-box {

    15. width: 264px;

    16. height: 120px;

    17. flex-wrap: wrap;

    18. justify-content: space-around;

    19. align-items: center;

    20. }

    21. .btn {

    22. border-radius: 8px;

    23. width: 120px;

    24. margin-top: 8px;

    25. }

    7.设置图片文件 data model 并 export 出来 common.datas.imgs.js

     
    1. export default [

    2. {

    3. src: "../images/heart50.png",

    4. },

    5. {

    6. src: "../images/heart60.png",

    7. },

    8. {

    9. src: "../images/heart70.png",

    10. },

    11. {

    12. src: "../images/heart80.png",

    13. },

    14. {

    15. src: "../images/heart90.png",

    16. },

    17. {

    18. src: "../images/heart100.png"

    19. }

    20. ]

    8.在 index.js 文件中导入图片模块,并写入相应逻辑,需要注意的是使用 $ref 获取到当前动画的节点对象。然后调用其对应的方法。

     

    9.图片无法正常显示,相对路径无法查找到文件位置,是因为 index.js 引入模块后,相对路径发生了变化,修改对应的路径。

    3、todolist应用构建

    1、页面结构设计注意事项

    页面结构使用 HTML 相同的标签进行嵌套,最外层是 div 容器。文本内容放在标签中才能呈现,否则不会呈现文本内容。可以直接调用 鸿蒙 JS 封装好的 组件,这里我们使用的是 switch 组件。

    2、页面样式设计注意事项

    页面 CSS 支持 id、class、tag 选择器,建议使用 class 选择器。页面样式系统基于 flex 弹性布局进行设置,默认就是 flex 弹性布局,需要注意,弹性布局会自动的拉升和压缩内部元素模块宽度、高度。鸿蒙封装的 JS 组件,有一个专门的样式说明,这个和我们传统的 CSS 写法有很大的差异,这个尤其需要注意。

    3、数据渲染与事件绑定

    (1)第三方JSON数据导入,使用相对路径

    (2)数据绑定

    (3)列表渲染

    (4)事件绑定