【无标题】鸿蒙培训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 文件中导入对应的页面结构代码。

 
  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)事件绑定

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值