UI设计开发与预览

1. 介绍

通过智能表待办应用开发，让开发者了解智能表HarmonyOS应用开发的全流程，实现从工程创建到界面预览全过程。使用HUAWEI DevEco Studio开发HarmonyOS待办应用，完成工程创建、代码编辑，界面预览等开发过程。

您将建立什么

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

您将学到什么

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

硬件要求

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

软件要求

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

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

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

需要的知识点

html、CSS、JavaScript开发基础能力

2. 代码开发

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>

预览效果如下所示：

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>

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

预览效果如下图所示：

3. 编译构建

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

4. 恭喜您

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

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

Back