感謝關注HarmonyOS，為了便于大家學習特將鴻蒙2.0基礎教學內容整理如下：

1、HarmonyOS應用開發—視頻播放
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap1/index.html#0

2、HarmonyOS應用開發—基本控制元件
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap2/index.html#0

3、HarmonyOS應用開發—UI開發與預覽
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-ui/index.html#0

4、HarmonyOS應用開發—設備虛擬化特性開發
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-screenhardware/index.html#0

5、HarmonyOS應用開發—HelloWorld應用開發E2E體驗
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-HelloWorld/index.html#0

6、HarmonyOS應用開發—有界面元程式互動
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap6/index.html#0

7、HarmonyOS應用開發-分布式任務調度
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap5/index.html#0

8、HarmonyOS應用開發—剪切板
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap4/index.html#0

9、HarmonyOS應用開發—應用偏好資料讀寫
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap3/index.html#0

以下為HarmonyOS應用開發—UI開發與預覽節選部分，如想進一步了解，請點擊：HarmonyOS應用開發—UI開發與預覽

一、介紹

本篇將實作的內容
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），

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

五. 編出hap包

六、恭喜你

祝賀你，你已經成功完成了Codelab并學到了：

• 如何開發一個智能表應用
• 如何實時預覽開發的UI界面
• 完成UI設計開發與預覽的整體流程，

【如果您想學習HarmonyOS 應用開發基礎教程 請猛戳】