HarmonyOS應(yīng)用開發(fā)-HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)

小嵌

HarmonyOS應(yīng)用開發(fā)-HelloWorld應(yīng)用開發(fā)E2E體驗(yàn),   
1. 介紹



智慧屏是首個(gè)搭載HarmonyOS的終端產(chǎn)品，通過HarmonyOS智慧屏多頁簽應(yīng)用開發(fā)模板，讓開發(fā)者了解HarmonyOS應(yīng)用開發(fā)的全流程，20分鐘快速上手，實(shí)現(xiàn)從工程創(chuàng)建到應(yīng)用運(yùn)行全過程。




您將建立什么

在這個(gè)CodeLab中，您將使用HUAWEIDevEco Studio開發(fā)HarmonyOS智慧屏多頁簽應(yīng)用，完成工程創(chuàng)建、編譯構(gòu)建，并實(shí)現(xiàn)HarmonyOS智慧屏部署和運(yùn)行。


您將學(xué)到什么

• 如何創(chuàng)建一個(gè)HarmonyOS     Project
    
  
• 編譯構(gòu)建hap包
    
  
• 將hap包部署到智慧屏遠(yuǎn)程模擬器上，并運(yùn)行
    
  

硬件要求

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

軟件要求

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

技能要求

• Java基礎(chǔ)開發(fā)能力
    
  
• JavaScript/HML（HarmonyOS Markup Language）     /CSS 基礎(chǔ)開發(fā)能力
    
  

2. 代碼開發(fā)
1. 工程創(chuàng)建在
File > New > New Project來創(chuàng)建一個(gè)新工程，選擇Tab Feature Ability（JS）模板：



工程創(chuàng)建.png （53.03 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

半小時(shí)前 上傳

填寫工程基本信息，如命名工程名和包名：



工程創(chuàng)建.png （57.14 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

半小時(shí)前 上傳

工程創(chuàng)建完成后，目錄結(jié)構(gòu)如下：



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

下載附件  保存到相冊  

半小時(shí)前 上傳

目錄結(jié)構(gòu)中文件分類及作用：

• .hml 文件布局結(jié)構(gòu)描述文件
    
  
• .css頁面樣式描述文件
    
  
• .js頁面顯示和用戶交互文件
    
  
• app.js 用于全局應(yīng)用生命周期管理
    
  
• pages 用于存放組件頁面
    
  
• common 用于存放公共資源文件。如：媒體資源、自定義組件和JS文件
    
  
• resources 用于存放資源配置文件。如：全局樣式、多分辨率加載等配置文件
    
  
• i18n用于存放全球化資源
    
  

2. 編碼本次CodeLab需要編寫布局文件、添加圖片資源以及修改模塊配置。

2.1 開發(fā)多頁簽界面布局及全球化資源

1、編輯布局文件entry/src/main/js/default/pages/index/index.hml

• <div class=“container“>
    
  
•     <div class=“tv_box“>
    
  
•         <div class=“title_box“>
    
  
•             <text class=“title“>{{$t（\“Strings.title\“）}}
    
  
•             </text>
    
  
•             <button type=“circle“ icon=“{{icon_src}}“ class=“setting_box“ onfocus=“iconFocusFunc“
    
  
•                 onblur=“iconBluRFunc“></button>
    
  
•         </div>
    
  
•         <tabs class=“tab_box“>
    
  
•             <tab-bar mode=“scrollable“ class=“bar_box“>
    
  
•                 <block for=“{{item in $t（\“Strings.tab\“）}}“>
    
  
•                     <text class=“tab_text“>{{item}}
    
  
•                     </text>
    
  
•                 </block>
    
  
•             </tab-bar>
    
  
•             <tab-content>
    
  
•                 <block for=“[1,2,3,4,5,6,7,8,9]“>
    
  
•                     <div class=“content_box“>
    
  
•                         <list class=“content_img“>
    
  
•                             <block for=“{{imgIndex in $t（\“Strings.images\“）}}“>
    
  
•                                 <list-item type=“l(fā)istItem“ class=“l(fā)ist_img“>
    
  
•                                     <image focusable=“true“ class=“tab_img“ src=“{{imgIndex}}“></image>
    
  
•                                 </list-item>
    
  
•                             </block>
    
  
•                         </list>
    
  
•                         <div class=“subtitle_box“>
    
  
•                             <text class=“subtitle“>{{$t（\“Strings.subtitle\“）}}
    
  
•                             </text>
    
  
•                         </div>
    
  
•                         <list class=“img_list“>
    
  
•                             <block for=“{{detailItem in $t（\“Strings.details\“）}}“>
    
  
•                                 <list-item type=“l(fā)istItem“ class=“l(fā)ist_box“>
    
  
•                                     <image focusable=“true“ class=“img_img“ src=“{{detailItem.pic}}“></image>
    
  
•                                     <text class=“img_text“>{{detailItem.text}}
    
  
•                                     </text>
    
  
•                                 </list-item>
    
  
•                             </block>
    
  
•                         </list>
    
  
•                     </div>
    
  
•                 </block>
    
  
•             </tab-content>
    
  
•         </tabs>
    
  
•     </div>
    
  
• </div>
    
  
• 
  

復(fù)制代碼 2、編輯全球化資源文件entry/src/main/js/default/i18n/zh-CN.json

• {
    
  
•     “Strings“: {
    
  
•         “title“: “華為智慧屏“,
    
  
•         “subtitle“: “歷史觀看“,
    
  
•         “tab“: [
    
  
•             “首頁“,
    
  
•             “電影“,
    
  
•             “電視劇“,
    
  
•             “購物“,
    
  
•             “溪村風(fēng)景“,
    
  
•             “圖冊“,
    
  
•             “少兒“,
    
  
•             “VIP“
    
  
•         ],
    
  
•         “images“: [
    
  
•             “/common/img-large1.png“,
    
  
•             “/common/img-large2.png“,
    
  
•             “/common/img-large3.png“,
    
  
•             “/common/img-large4.png“
    
  
•         ],
    
  
•         “text“: “文本內(nèi)容“,
    
  
•         “details“: [
    
  
•             {
    
  
•                 “text“: “花園“,
    
  
•                 “pic“: “/common/img-small1.png“
    
  
•             },
    
  
•             {
    
  
•                 “text“: “風(fēng)景一角“,
    
  
•                 “pic“: “/common/img-small2.png“
    
  
•             },
    
  
•             {
    
  
•                 “text“: “藍(lán)天白云“,
    
  
•                 “pic“: “/common/img-small3.png“
    
  
•             },
    
  
•             {
    
  
•                 “text“: “池塘“,
    
  
•                 “pic“: “/common/img-small4.png“
    
  
•             },
    
  
•             {
    
  
•                 “text“: “辦公一角“,
    
  
•                 “pic“: “/common/img-small5.png“
    
  
•             }
    
  
•         ]
    
  
•     },
    
  
•     “Files“: {}
    
  
• }
    
  
• 
  

復(fù)制代碼 2.2 添加圖片資源

將CodeLabPC桌面CodeLab/common目錄下的資源拷貝到entry/src/main/js/default/commom。


注：可以在
common
目錄點(diǎn)擊右鍵，通過
Show inExplorer
快速進(jìn)入目錄。

2.3修改模塊配置文件

修改entry/src/main/config.json文件，將designWidth的值修改為1024，并將autoDesignWidth的值修改為false。

• “js“: [
    
  
•     {
    
  
•         “pages“: [
    
  
•             “pages/index/index“
    
  
•         ],
    
  
•         “name“: “default“,
    
  
•         “window“: {
    
  
•             “designWidth“: 1024,
    
  
•             “autoDesignWidth“: false
    
  
•         }
    
  
•     }
    
  
• ]
    
  
• 
  

復(fù)制代碼


3. 編譯構(gòu)建點(diǎn)擊
Build > Build APP（s）/Hap（s） > Build debugHap（s） 進(jìn)行代碼編譯構(gòu)建，



編譯.png （40.67 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

半小時(shí)前 上傳

等待系統(tǒng)編譯，在控制臺看到編譯成功提示信息即可。






4. 部署并運(yùn)行
1. 啟動(dòng)模擬器點(diǎn)擊Tools>HVD Manager啟動(dòng)模擬器。





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

下載附件  保存到相冊  

半小時(shí)前 上傳


注：使用模擬器需要登錄實(shí)名認(rèn)證的華為開發(fā)者賬號，請按照提示完成登錄及授權(quán)。

選擇智慧屏模擬器（TV），點(diǎn)擊啟動(dòng)按鈕，如下圖所示。



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

下載附件  保存到相冊  

半小時(shí)前 上傳

待模擬器啟動(dòng)成功后，出現(xiàn)下圖所示的界面。



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

下載附件  保存到相冊  

半小時(shí)前 上傳




2. 部署應(yīng)用點(diǎn)擊Run > Run ‘Entry\“，部署應(yīng)用。



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

下載附件  保存到相冊  

半小時(shí)前 上傳

選擇模擬器設(shè)備。



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

下載附件  保存到相冊  

半小時(shí)前 上傳

應(yīng)用程序運(yùn)行如下



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

下載附件  保存到相冊  

半小時(shí)前 上傳

至此，您已經(jīng)成功開發(fā)出第一個(gè)HarmonyOS應(yīng)用，歡迎進(jìn)入HarmonyOS世界！




5. 恭喜您您已經(jīng)成功完成了HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)，并學(xué)到了：

• 如何創(chuàng)建一個(gè)HarmonyOS     Project
    
  
• 編譯構(gòu)建hap包
    
  
• 將hap包部署到智慧屏遠(yuǎn)程模擬器上并運(yùn)行