HarmonyOS应用开发—UI开发与预览.md

# 一、介绍

**本篇将实现的内容**

HarmonyOS是面向全场景多终端的分布式操作系统，使得应用程序的开发打破了智能终端互通的性能和数据壁垒，业务逻辑原子化开发，适配多端。

通过智能表待办应用开发，让开发者了解智能表鸿蒙应用开发的全流程，实现从工程创建到运行调试应用全过程。使用HUAWEI DevEco Studio开发鸿蒙待办应用，完成工程创建、代码编辑，编译构建、运行调试等开发过程。

**您将建立什么**

你将创建一个智能表的Demo Project（harmony-todo），以及完成一个待办应用的页面的搭建和预览。

**您将会学到什么**

 1. 如何搭建一个APP示例并添加页面布局
 2. 如何实时预览创建的页面布局信息
 3. 完成智能表应用的页面搭建和预览的整体流程

# 二、您需要什么

## 1. 硬件要求

操作系统：Windows10 64位
内存：8G及以上。
硬盘：100G及以上。
分辨率：1280*800及以上


## 2. 软件要求

需手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.2
JDK：DevEco Studio自动安装。
Node.js：请手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.3 下载和安装Node.js。
HarmonyOS SDK：待DevEco Studio安装完成后，利用DevEco Studio来加载HarmonyOS SDK。详细步骤请参考《DevEco Studio使用指南》2.1.6 加载HarmonyOS SDK。
Maven库依赖包：如需手动拷贝和配置，详细步骤请参考《DevEco Studio使用指南》2.3 离线方式配置Maven库。


## 3. 需要的知识点

Java基础开发能力。

# 三、能力接入准备

完成UI开发与预览能力，需要完成以下准备工作：
 - 环境准备    
 - 环境搭建

具体操作，请按照《开发指南》中"应用开发"的详细说明来完成。

# 四、Demo开发步骤

## 1. 打开本地Demo Project（harmony-todo）。

![](https://img-blog.csdnimg.cn/20200908134934375.png#pic_center)
![](https://img-blog.csdnimg.cn/20200908134919272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

## 2. 点击Previewer按钮，实时预览Demo Project（harmony-todo）（开发过程完成每一步点击保存之后即可在预览界面实时预览效果）。

![](https://img-blog.csdnimg.cn/20200908135030404.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

## 3. 为index页面（index.js）添加布局信息：//设置页面背景透明

![](https://img-blog.csdnimg.cn/20200908135116321.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

3.1 添加今日待办事项的列表：

```go
<todo-header title="今日" type="" @add-event="toAddEvent('today')"></todo-header>
<list-item id="item{{$item.id}}" for="{{todolist}}" class="tag-list-item" clickeffect="false">
   <todo-list todo="{{$item}}" todos="{{todolist}}" index="{{$idx}}"></todo-list>
</list-item>
```
![](https://img-blog.csdnimg.cn/202009081352121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

3.2 添加明日待办事项的列表：

```go
<todo-header title="明日" type="" @to-add-event="toAddEvent('tomorrow')"></todo-header>
<list-item id="item{{$item.id}}" for="{{tomorrowlist}}" class="tag-list-item" clickeffect="false">
   <todo-list todo="{{$item}}" todos="{{tomorrowlist}}" index="{{$idx}}"></todo-list>
</list-item>
```
![](https://img-blog.csdnimg.cn/20200908135306734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

3.3 添加即将来临待办事项的列表：

```go
<todo-header title="即将来临" type="" @to-add-event="toAddEvent('soon')"></todo-header>
<list-item id="item{{$item.id}}" for="{{soonlist}}" class="tag-list-item" clickeffect="false">
<todo-list todo="{{$item}}" todos="{{soonlist}}" index="{{$idx}}"></todo-list>
</list-item>
```

![](https://img-blog.csdnimg.cn/20200908135410974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

4. 添加逻辑代码(tagpage.js)：

![](https://img-blog.csdnimg.cn/2020090813555281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

设置待办事项完成的逻辑代码：


```go
completeEvent(clicked){
var key = clicked.detail.key;
if(!(key['type'] == 'click' || key[0].code == 22)){
        return ;
}
var lists = clicked.detail.lists;
var eid = clicked.detail.id;
/*完成事项的动画*/
for(var i in lists){
    if(lists[i].id == eid){
        if(lists[i].checkbtn == "/common/done.png"){
            lists[i].checkbtn = "/common/checkbutton.png";
            lists[i].showtag = '';
            lists[i].color = 'text-default';
            lists[i].lineclz = false;
        } else {
            lists[i].checkbtn = "/common/done.png";
            lists[i].showtag = 'hide';
            lists[i].color = 'text-gray';
            lists[i].lineclz = true;
        }
        break;
    }
}
this.updateStorage();
},
```
![](https://img-blog.csdnimg.cn/20200908135644540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

点击删除待办事项的逻辑代码：

```go
deleteEvent(clicked){
var key = clicked.detail.key;
if(!(key['type'] == 'click' || key[0].code == 21)){
    return ;
}
var eid = clicked.detail.id;
var lists = clicked.detail.lists;
console.info('1111'+clicked);
this.deleteItem(lists, eid);
this.updateStorage();
},
```
![](https://img-blog.csdnimg.cn/20200908135732538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)


## 五. 编出hap包

![](https://img-blog.csdnimg.cn/20200908135901697.png#pic_center)
![](https://img-blog.csdnimg.cn/2020090813591282.png#pic_center)

# 六、恭喜你

祝贺你，你已经成功完成了Codelab并学到了：
 - 如何开发一个智能表应用 
 - 如何实时预览开发的UI界面 
 - 完成UI设计开发与预览的整体流程。


[【如果您想学习HarmonyOS 应用开发基础教程 请猛戳】](https://codechina.csdn.net/huawei/harmonyos/HarmonyOS-Guide)