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 文件中导入对应的页面结构代码。
-
<div class="container">
-
<image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
-
<div class="btn-box">
-
<input class="btn" type="button" value="start" @click="handleStart" />
-
<input class="btn" type="button" value="stop" @click="handleStop" />
-
<input class="btn" type="button" value="pause" @click="handlePause" />
-
<input class="btn" type="button" value="resume" @click="handleResume" />
-
</div>
-
</div>
6.导入 css 样式文件
-
.container {
-
flex-direction: column;
-
justify-content: center;
-
align-items: center;
-
left: 0px;
-
top: 0px;
-
width: 454px;
-
height: 454px;
-
}
-
.animator {
-
width: 70px;
-
height: 70px;
-
}
-
.btn-box {
-
width: 264px;
-
height: 120px;
-
flex-wrap: wrap;
-
justify-content: space-around;
-
align-items: center;
-
}
-
.btn {
-
border-radius: 8px;
-
width: 120px;
-
margin-top: 8px;
-
}
7.设置图片文件 data model 并 export 出来 common.datas.imgs.js
-
export default [
-
{
-
src: "../images/heart50.png",
-
},
-
{
-
src: "../images/heart60.png",
-
},
-
{
-
src: "../images/heart70.png",
-
},
-
{
-
src: "../images/heart80.png",
-
},
-
{
-
src: "../images/heart90.png",
-
},
-
{
-
src: "../images/heart100.png"
-
}
-
]
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)事件绑定