本篇将实现的内容
HarmonyOS是面向全场景多终端的分布式操做系统,使得应用程序的开发打破了智能终端互通的性能和数据壁垒,业务逻辑原子化开发,适配多端。html
经过智能表待办应用开发,让开发者了解智能表鸿蒙应用开发的全流程,实现从工程建立到运行调试应用全过程。使用HUAWEI DevEco Studio开发鸿蒙待办应用,完成工程建立、代码编辑,编译构建、运行调试等开发过程。web
您将创建什么
你将建立一个智能表的Demo Project(harmony-todo),以及完成一个待办应用的页面的搭建和预览。分布式
您将会学到什么ide
操做系统:Windows10 64位
内存:8G及以上。
硬盘:100G及以上。
分辨率:1280*800及以上svg
需手动下载安装,详细步骤请参考《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库。布局
Java基础开发能力。性能
完成UI开发与预览能力,须要完成如下准备工做:学习
具体操做,请按照《开发指南》中"应用开发"的详细说明来完成。动画
3.1 添加今日待办事项的列表:this
<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>
3.2 添加明日待办事项的列表:
<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>
3.3 添加即未来临待办事项的列表:
<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>
4. 添加逻辑代码(tagpage.js):
设置待办事项完成的逻辑代码:
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(); },
点击删除待办事项的逻辑代码:
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(); },
祝贺你,你已经成功完成了Codelab并学到了: