一、DevEco Studio软件的下载
在华为官网上搜索此软件,找到对应版本进行下载,按照官方给的流程下载即可。
出现的问题:
在第一次安装的鸿蒙APP的时候出现了很多的问题,比如说没办法打开软件自带的预览器,进行实时查看,所以我选择了重装。
第二次选择的是Beta3,但是因为这次的软件没有太多的终端选项,没有办法展示腕表的操作,所以我依旧选择了重装Beta2。
第三次为了避免再次出现预览器无法查看的情况,我在新建文件夹的时候特别的小心,如下图所示,幸好,这次成功运行出来了“您好,世界”。
二、基础组件介绍
组件类型 | 主要组件 |
---|---|
基础组件 | 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 |
三、使用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 获取到当前动画的节点对象。然后调用其对应的方法。
import imgs from "../../common/datas/imgs.js"
export default {
data: {
frames:imgs
},
handleStart() {
this.$refs.animator.start();
},
handlePause() {
this.$refs.animator.pause();
},
handleResume() {
this.$refs.animator.resume();
},
handleStop() {
this.$refs.animator.stop();
},
};
9.图片无法正常显示,相对路径无法查找到文件位置,是因为 index.js 引入模块后,相对路径发生了变化,修改对应的路径。
export default [
{
src: "/common/images/heart50.png",
},
{
src: "/common/images/heart60.png",
},
{
src: "/common/images/heart70.png",
},
{
src: "/common/images/heart80.png",
},
{
src: "/common/images/heart90.png",
},
{
src: "/common/images/heart100.png"
}
]
四、todolist应用构建
1、页面结构设计注意事项
页面结构使用 HTML 相同的标签进行嵌套,最外层是 div 容器。文本内容放在<text>
标签中才能呈现,否则不会呈现文本内容。可以直接调用 鸿蒙 JS 封装好的 组件,这里我们使用的是 switch 组件。
2、页面样式设计注意事项
页面 CSS 支持 id、class、tag 选择器,建议使用 class 选择器。页面样式系统基于 flex 弹性布局进行设置,默认就是 flex 弹性布局,需要注意,弹性布局会自动的拉升和压缩内部元素模块宽度、高度。鸿蒙封装的 JS 组件,有一个专门的样式说明,这个和我们传统的 CSS 写法有很大的差异,这个尤其需要注意。
3、数据渲染与事件绑定
(1)第三方JSON数据导入,使用相对路径
(2)数据绑定
(3)列表渲染
(4)事件绑定
最终书写结果: