HarmonyOS應(yīng)用開(kāi)發(fā)-UI設(shè)計(jì)開(kāi)發(fā)與預(yù)覽

小嵌

HarmonyOS應(yīng)用開(kāi)發(fā)-UI設(shè)計(jì)開(kāi)發(fā)與預(yù)覽,   
. 介紹通過(guò)智能表待辦應(yīng)用開(kāi)發(fā)，讓開(kāi)發(fā)者了解智能表HarmonyOS應(yīng)用開(kāi)發(fā)的全流程，實(shí)現(xiàn)從工程創(chuàng)建到界面預(yù)覽全過(guò)程。使用HUAWEIDevEco Studio開(kāi)發(fā)HarmonyOS待辦應(yīng)用，完成工程創(chuàng)建、代碼編輯，界面預(yù)覽等開(kāi)發(fā)過(guò)程。


您將建立什么在這個(gè)CodeLab中，你將創(chuàng)建一個(gè)智能表的DemoProject（harmony-todo），以及完成一個(gè)待辦應(yīng)用的頁(yè)面的搭建和預(yù)覽。


您將學(xué)到什么

• 如何搭建一個(gè)APP并添加頁(yè)面布局
  
• 如何實(shí)時(shí)預(yù)覽創(chuàng)建的頁(yè)面布局信息
  
• 完成智能表應(yīng)用的頁(yè)面搭建和預(yù)覽
    
  

硬件要求

• 操作系統(tǒng)：Windows10     64位
  
• 內(nèi)存：8G及以上
  
• 硬盤(pán)：100g及以上
  
• 分辨率：1280*800及以上
    
  

軟件要求

• 安裝DevEco     Studio和Node.js，詳情請(qǐng)參考下載和安裝軟件
    
  

提示：智能表UI開(kāi)發(fā)的預(yù)覽功能將在Beta2版本上線，當(dāng)前只能在CodeLab現(xiàn)場(chǎng)體驗(yàn)嘗鮮

• 設(shè)置DevEco     Studio開(kāi)發(fā)環(huán)境，DevEco     Studio開(kāi)發(fā)環(huán)境需要依賴于網(wǎng)絡(luò)環(huán)境，需要連接上網(wǎng)絡(luò)才能確保工具的正常使用，可以根據(jù)如下兩種情況來(lái)配置開(kāi)發(fā)環(huán)境
  
• 如果可以直接訪問(wèn)Internet，只需進(jìn)行下載HarmonyOS SDK操作
  
• 如果網(wǎng)絡(luò)不能直接訪問(wèn)Internet，需要通過(guò)代理服務(wù)器才可以訪問(wèn)，請(qǐng)參考配置開(kāi)發(fā)環(huán)境
    
  

提示：下載HarmonyOS SDK時(shí)，需要下載JS SDK和SDK Tools中的Previewer


需要的知識(shí)點(diǎn)

• html、CSS、JavaScript開(kāi)發(fā)基礎(chǔ)能力
    
  

2. 代碼開(kāi)發(fā)
1.打開(kāi)本地Demo Project（harmony-todo）



1.png （18.71 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

16 分鐘前 上傳



2.png （41.06 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

16 分鐘前 上傳


2、點(diǎn)擊
Previewer
按鈕，實(shí)時(shí)預(yù)覽
Demo Project
（
harmony-todo
）



3.png （61.72 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

15 分鐘前 上傳


提示：開(kāi)發(fā)過(guò)程完成每一步點(diǎn)擊保存之后即可在預(yù)覽界面實(shí)時(shí)預(yù)覽效果




3.為index頁(yè)面（index.hml）添加布局信息

4.png （27.5 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

14 分鐘前 上傳


3.1添加今日待辦事項(xiàng)的列表

• <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>
    
  
• 
  

復(fù)制代碼
提示：以上代碼只是demo演示，產(chǎn)品化的代碼需要使用國(guó)際化

預(yù)覽效果如下所示：



5.png （42.04 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

12 分鐘前 上傳




3.2添加明日待辦事項(xiàng)的列表

• <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>
    
  
• 
  

復(fù)制代碼
提示：以上代碼只是demo演示，產(chǎn)品化的代碼需要使用國(guó)際化



6.png （502.8 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

11 分鐘前 上傳




3.3添加即將來(lái)臨待辦事項(xiàng)的列表

• <todo-header title=“即將來(lái)臨“ 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>
    
  
• 
  

復(fù)制代碼
提示：以上代碼只是demo演示，產(chǎn)品化的代碼需要使用國(guó)際化




4.添加邏輯代碼（index.js）

7.png （30.36 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

9 分鐘前 上傳


4.1添加待辦事項(xiàng)完成的邏輯代碼

• completeEvent（clicked） {
    
  
•     var lists = clicked.detail.lists;
    
  
•     var eid = clicked.detail.id;
    
  
•     datahelper.completeEvent（eid, lists）;
    
  
• },
    
  
• 
  

復(fù)制代碼
4.2添加刪除待辦事項(xiàng)的邏輯代碼

• deleteEvent（clicked）{
    
  
•     var index = clicked.detail.index;
    
  
•     var lists = clicked.detail.lists;
    
  
•     lists.splice（index, 1）;
    
  
• }
    
  
• 
  

復(fù)制代碼 預(yù)覽效果如下圖所示：



8.png （56.65 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

7 分鐘前 上傳




3. 編譯構(gòu)建點(diǎn)擊
Build > Build APP（s）/Hap（s） > Build debugHap（s），打包生成hap包



9.png （37.31 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

6 分鐘前 上傳


4. 恭喜您您已經(jīng)成功完成了CodeLab，并學(xué)到了：

• 如何開(kāi)發(fā)一個(gè)智能表應(yīng)用
  
• 如何實(shí)時(shí)預(yù)覽開(kāi)發(fā)的UI界面
  
• 完成UI設(shè)計(jì)開(kāi)發(fā)與預(yù)覽的整體流程。