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

发布于 2020-9-11 14:41
浏览
1收藏

一、介绍


本篇将实现的内容
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开发与预览能力,需要完成以下准备工作:

1)环境准备
2)环境搭建
具体操作,请按照《开发指南》中"应用开发"的详细说明来完成。

 

四、Demo开发步骤
1. 打开本地Demo Project(harmony-todo)。

HarmonyOS应用开发—UI开发与预览-开源基础软件社区

2.点击Previewer按钮,实时预览Demo Project(harmony-todo)

HarmonyOS应用开发—UI开发与预览-开源基础软件社区

提示:开发过程完成每一步点击保存之后即可在预览界面实时预览效果

3.为index页面(index.hml)添加布局信息

HarmonyOS应用开发—UI开发与预览-开源基础软件社区

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演示,产品化的代码需要使用国际化

预览效果如下所示:

HarmonyOS应用开发—UI开发与预览-开源基础软件社区
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演示,产品化的代码需要使用国际化

HarmonyOS应用开发—UI开发与预览-开源基础软件社区
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)

HarmonyOS应用开发—UI开发与预览-开源基础软件社区

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

五. 编译构建HarmonyOS应用开发—UI开发与预览-开源基础软件社区

 

恭喜您

您已经成功完成了CodeLab,并学到了:

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

感谢关注HarmonyOS,如果想学习更多鸿蒙2.0基础教学请点击下面链接
HarmonyOS应用开发 — HelloWorld应用开发E2E体验
https://harmonyos.51cto.com/posts/ids/?id=707

HarmonyOS应用开发-元程序交互
https://harmonyos.51cto.com/posts/ids?id=709

HarmonyOS应用开发-分布式任务调度
https://harmonyos.51cto.com/posts/ids/?id=710

HarmonyOS应用开发-剪切板
https://harmonyos.51cto.com/posts/ids/?id=712

HarmonyOS应用开发-应用偏好数据读写
https://harmonyos.51cto.com/posts/ids/?id=713

HarmonyOS应用开发—UI开发与预览
https://harmonyos.51cto.com/posts/ids/?id=711

HarmonyOS应用开发-基本控件
https://harmonyos.51cto.com/posts/ids/?id=708

HarmonyOS应用开发-视频播放
https://harmonyos.51cto.com/posts/ids/?id=706

HarmonyOS应用开发 — 设备虚拟化特性开发
https://harmonyos.51cto.com/posts/ids?id=714

 

标签
已于2020-10-16 16:35:28修改
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐