HarmonyOS应用开发-UI设计开发与预览 - HarmonyOS技术社区 - 电子技术论坛

2020-09-23 17:51:24

`. 介绍通过智能表待办应用开发，让开发者了解智能表HarmonyOS应用开发的全流程，实现从工程创建到界面预览全过程。使用HUAWEIDevEco Studio开发HarmonyOS待办应用，完成工程创建、代码编辑，界面预览等开发过程。
您将建立什么在这个CodeLab中，你将创建一个智能表的DemoProject（harmony-todo），以及完成一个待办应用的页面的搭建和预览。
您将学到什么

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

硬件要求

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

软件要求

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

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

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

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

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>

复制代码

提示：以上代码只是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)