一、介紹

本篇將實作的內容
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開發與預覽能力，需要完成以下準備作業：

環境準備
環境搭建

具體操作，請按照《開發指南》中"應用開發"的詳細說明來完成，

四、Demo開發步驟

1. 打開本地Demo Project（harmony-todo），

在這里插入圖片描述

2. 點擊Previewer按鈕，實時預覽Demo Project（harmony-todo）（開發程序完成每一步點擊保存之后即可在預覽界面實時預覽效果），

在這里插入圖片描述

3. 為index頁面（index.js）添加布局資訊：//設定頁面背景透明

在這里插入圖片描述
3.1 添加今日待辦事項的串列：

<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();
},