【无标题】鸿蒙培训1

 

1、基础组件介绍

组件类型	主要组件
基础组件	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、使用image-animator组件构建多图帧动画

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

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

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

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

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

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

1. <div class="container">

2. <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />

3. <div class="btn-box">

4. <input class="btn" type="button" value="start" @click="handleStart" />

5. <input class="btn" type="button" value="stop" @click="handleStop" />

6. <input class="btn" type="button" value="pause" @click="handlePause" />

7. <input class="btn" type="button" value="resume" @click="handleResume" />

8. </div>

9. </div>

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 容器。文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。可以直接调用 鸿蒙 JS 封装好的 组件，这里我们使用的是 switch 组件。

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

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

3、数据渲染与事件绑定

（1）第三方JSON数据导入，使用相对路径

（2）数据绑定

（3）列表渲染

（4）事件绑定