一、介绍
本篇将实现的内容
HarmonyOS是面向全场景多终端的分布式操作系统，使得应用程序的开发打破了智能终端互通的性能和数据壁垒，业务逻辑原子化开发，适配多端。
通过智能表待办应用开发，让开发者了解智能表鸿蒙应用开发的全流程，实现从工程创建到运行调试应用全过程。使用HUAWEI DevEco Studio开发鸿蒙待办应用，完成工程创建、代码编辑，编译构建、运行调试等开发过程。
您将建立什么
你将创建一个智能表的Demo Project（harmony-todo），以及完成一个待办应用的页面的搭建和预览。
您将会学到什么
如何搭建一个APP示例并添加页面布局
如何实时预览创建的页面布局信息
完成智能表应用的页面搭建和预览的整体流程
二、您需要什么
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开发与预览能力，需要完成以下准备工作：
1）环境准备
2）环境搭建
具体操作，请按照《开发指南》中"应用开发"的详细说明来完成。
https://harmonyos.51cto.com/?bkwz
四、Demo开发步骤
1. 打开本地Demo Project（harmony-todo）。
2.点击Previewer按钮，实时预览Demo Project（harmony-todo）
提示：开发过程完成每一步点击保存之后即可在预览界面实时预览效果
3.为index页面（index.hml）添加布局信息
3.1添加今日待办事项的列表
<todo-header title="今日待办" type="" @add-event="toAddEvent"></todo-header>
<list-item for="{{todayList}}" class="tag-list-item" clickeffect="false">
<todo-list @complete-event="completeEvent" @delete-event="deleteEvent" todo="{{$item}}"
todos="{{todayList}}" index="{{$idx}}"></todo-list>
</list-item>
提示：以上代码只是demo演示，产品化的代码需要使用国际化
预览效果如下所示：
3.2添加明日待办事项的列表
<todo-header title="明日待办" type="" @add-event="toAddEvent"></todo-header>
<list-item for="{{tomorrowList}}" class="tag-list-item" clickeffect="false">
<todo-list @complete-event="completeEvent" @delete-event="deleteEvent" todo="{{$item}}"
todos="{{tomorrowList}}" index="{{$idx}}"></todo-list>
</list-item>
提示：以上代码只是demo演示，产品化的代码需要使用国际化
3.3添加即将来临待办事项的列表
<todo-header title="即将来临" type="" @add-event="toAddEvent"></todo-header>
<list-item for="{{laterList}}" class="tag-list-item" clickeffect="false">
<todo-list @complete-event="completeEvent" @delete-event="deleteEvent" todo="{{$item}}"
todos="{{laterList}}" index="{{$idx}}"></todo-list>
</list-item>
4.添加逻辑代码(index.js)
4.1添加待办事项完成的逻辑代码
completeEvent(clicked) {
var lists = clicked.detail.lists;
var eid = clicked.detail.id;
datahelper.completeEvent(eid, lists);
},
4.2添加删除待办事项的逻辑代码
deleteEvent(clicked){
var index = clicked.detail.index;
var lists = clicked.detail.lists;
lists.splice(index, 1);
},
五. 编译构建
恭喜您
您已经成功完成了CodeLab，并学到了：
如何开发一个智能表应用
如何实时预览开发的UI界面
完成UI设计开发与预览的整体流程。
感谢关注HarmonyOS，如果想学习更多鸿蒙2.0基础教学请点击下面链接
HarmonyOS应用开发 — HelloWorld应用开发E2E体验
https://harmonyos.51cto.com/posts/ids/?id=707
HarmonyOS应用开发-元程序交互
https://harmonyos.51cto.com/posts/ids?id=709
HarmonyOS应用开发-分布式任务调度
https://harmonyos.51cto.com/posts/ids/?id=710
HarmonyOS应用开发-剪切板
https://harmonyos.51cto.com/posts/ids/?id=712
HarmonyOS应用开发-应用偏好数据读写
https://harmonyos.51cto.com/posts/ids/?id=713
HarmonyOS应用开发—UI开发与预览
https://harmonyos.51cto.com/posts/ids/?id=711
HarmonyOS应用开发-基本控件
https://harmonyos.51cto.com/posts/ids/?id=708
HarmonyOS应用开发-视频播放
https://harmonyos.51cto.com/posts/ids/?id=706
HarmonyOS应用开发 — 设备虚拟化特性开发
https://harmonyos.51cto.com/posts/ids?id=714
https://harmonyos.51cto.com/?bkwz
