一、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）事件绑定

最终书写结果：

OpenHarmony(1)