HarmonyOS应用开发-UI设计开发与预览

小嵌

HarmonyOS应用开发-UI设计开发与预览,   
. 介绍通过智能表待办应用开发，让开发者了解智能表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）



1.png （18.71 KB, 下载次数: 0）

下载附件  保存到相册  

16 分钟前 上传



2.png （41.06 KB, 下载次数: 0）

下载附件  保存到相册  

16 分钟前 上传


2、点击
Previewer
按钮，实时预览
Demo Project
（
harmony-todo
）



3.png （61.72 KB, 下载次数: 0）

下载附件  保存到相册  

15 分钟前 上传


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




3.为index页面（index.hml）添加布局信息

4.png （27.5 KB, 下载次数: 0）

下载附件  保存到相册  

14 分钟前 上传


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

预览效果如下所示：



5.png （42.04 KB, 下载次数: 0）

下载附件  保存到相册  

12 分钟前 上传




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



6.png （502.8 KB, 下载次数: 0）

下载附件  保存到相册  

11 分钟前 上传




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）

7.png （30.36 KB, 下载次数: 0）

下载附件  保存到相册  

9 分钟前 上传


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）;
    
  
• }
    
  
• 
  

复制代码 预览效果如下图所示：



8.png （56.65 KB, 下载次数: 0）

下载附件  保存到相册  

7 分钟前 上传




3. 编译构建点击
Build > Build APP（s）/Hap（s） > Build debugHap（s），打包生成hap包



9.png （37.31 KB, 下载次数: 0）

下载附件  保存到相册  

6 分钟前 上传


4. 恭喜您您已经成功完成了CodeLab，并学到了：

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