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

感谢关注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开发HarmonyOS待办应用，完成工程创建、代码编辑，界面预览等开发过程。

您将建立什么

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

您将学到什么

• 如何搭建一个APP并添加页面布局
• 如何实时预览创建的页面布局信息
• 完成智能表应用的页面搭建和预览

硬件要求

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

软件要求

• 安装DevEcoStudio和Node.js，详情请参考下载和安装软件

提示：智能表UI开发的预览功能将在Beta2版本上线，当前只能在CodeLab现场体验尝鲜

• 设置DevEco Studio开发环境，DevEcoStudio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境
• 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作
• 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境

提示：下载HarmonyOS SDK时，需要下载JS SDK和SDK Tools中的Previewer

需要的知识点

• html、CSS、JavaScript开发基础能力

二、代码开发

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>

提示：以上代码只是demo演示，产品化的代码需要使用国际化

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

预览效果如下图所示：

三、编译构建

点击Build > Build APP(s)/Hap(s) > Build Debug Hap(s)，打包生成hap包

四、恭喜您

您已经成功完成了CodeLab，并学到了：

• 如何开发一个智能表应用
• 如何实时预览开发的UI界面
• 完成UI设计开发与预览的整体流程。

【如果您想学习HarmonyOS 应用开发基础教程 请猛戳】