HarmonyOS鴻蒙實(shí)現(xiàn)HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)

感謝關(guān)注HarmonyOS，為了便于大家學(xué)習(xí)特將鴻蒙2.0基礎(chǔ)教學(xué)內(nèi)容整理如下：

1、HarmonyOS應(yīng)用開發(fā)—視頻播放
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap1/index.html

2、HarmonyOS應(yīng)用開發(fā)—基本控件
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap2/index.html

3、HarmonyOS應(yīng)用開發(fā)—UI開發(fā)與預(yù)覽
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-ui/index.html

4、HarmonyOS應(yīng)用開發(fā)—設(shè)備虛擬化特性開發(fā)
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-screenhardware/index.html

5、HarmonyOS應(yīng)用開發(fā)—HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-HelloWorld/index.html

6、HarmonyOS應(yīng)用開發(fā)—有界面元程序交互
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap6/index.html

7、HarmonyOS應(yīng)用開發(fā)-分布式任務(wù)調(diào)度
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap5/index.html

8、HarmonyOS應(yīng)用開發(fā)—剪切板
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap4/index.html

9、HarmonyOS應(yīng)用開發(fā)—應(yīng)用偏好數(shù)據(jù)讀寫
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap3/index.html

以下為HarmonyOS應(yīng)用開發(fā)—HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)節(jié)選部分，如想進(jìn)一步了解，請(qǐng)點(diǎn)擊：HarmonyOS應(yīng)用開發(fā)—HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)

一、介紹

本篇將實(shí)現(xiàn)的內(nèi)容

智慧屏是首個(gè)搭載HarmonyOS的終端產(chǎn)品，通過HarmonyOS智慧屏多頁簽應(yīng)用開發(fā)，讓開發(fā)者了解HarmonyOS應(yīng)用開發(fā)的全流程，20分鐘快速上手，實(shí)現(xiàn)從工程創(chuàng)建到應(yīng)用上架全過程。
您將建立什么
在這個(gè)Codelab中，您將使用HUAWEI DevEco Studio（IDE）開發(fā)HarmonyOS智慧屏多頁簽應(yīng)用，完成開發(fā)者證書申請(qǐng)，工程創(chuàng)建、編譯構(gòu)建、應(yīng)用調(diào)試，并實(shí)現(xiàn)HarmonyOS智慧屏部署和運(yùn)行。

您將學(xué)到什么

如何創(chuàng)建一個(gè)HarmonyOS Project申請(qǐng)/配置調(diào)試簽名證書編譯構(gòu)建hap包將hap包部署到智慧屏遠(yuǎn)程模擬器上，并運(yùn)行

二、您需要什么

1. 硬件要求

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

2. 軟件要求

需手動(dòng)下載安裝，詳細(xì)步驟請(qǐng)參考《DevEco Studio使用指南》2.1.2
JDK：DevEco Studio自動(dòng)安裝。
Node.js：請(qǐng)手動(dòng)下載安裝，詳細(xì)步驟請(qǐng)參考《DevEco Studio使用指南》2.1.3 下載和安裝Node.js。
HarmonyOS SDK：待DevEco Studio安裝完成后，利用DevEco Studio來加載HarmonyOS SDK。詳細(xì)步驟請(qǐng)參考《DevEco Studio使用指南》2.1.6 加載HarmonyOS SDK。
Maven庫依賴包：如需手動(dòng)拷貝和配置，詳細(xì)步驟請(qǐng)參考《DevEco Studio使用指南》2.3 離線方式配置Maven庫。

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

Java基礎(chǔ)開發(fā)能力。

三、能力接入準(zhǔn)備

實(shí)現(xiàn)HarmonyOS智慧屏部署和運(yùn)行，需要完成以下準(zhǔn)備工作：

HUAWEI DevEco Studio環(huán)境搭建HarmonyOS門戶申請(qǐng)調(diào)試證書

具體操作，請(qǐng)按照《HUAWEI DevEco Studio使用指南》中詳細(xì)說明來完成。

具體操作，請(qǐng)按照《DevEco Studio使用指南》中詳細(xì)說明來完成。

提示：需要通過注冊(cè)成開發(fā)者才能完成集成準(zhǔn)備中的操作。

四、HarmonyOS應(yīng)用開發(fā)

1. 創(chuàng)建工程

創(chuàng)建一個(gè)空工程，選擇多頁簽Tab Feature Ability類型，并命名工程名和包名。

一起看看工程目錄結(jié)構(gòu)

目錄結(jié)構(gòu)中文件分類如下：

1..hml結(jié)尾的HML模板文件，這個(gè)文件用來描述當(dāng)前頁面的文件布局結(jié)構(gòu)，類似于網(wǎng)頁中的HTML文件。
2..css結(jié)尾的CSS樣式文件，這個(gè)文件用于描述頁面樣式。
3..js結(jié)尾的JS文件，這個(gè)文件用于處理頁面和用戶的交互。

各個(gè)文件夾的作用：

1.app.js文件用于全局JavaScript邏輯和應(yīng)用生命周期管理。 pages目錄用于存放所有組件頁面。
2.common目錄用于存放公共資源文件，比如：媒體資源，自定義組件和JS文件。
3.resources目錄用于存放資源配置文件，比如：全局樣式、多分辨率加載等配置文件。
4.i18n目錄用于配置不同語言場(chǎng)景資源內(nèi)容，比如應(yīng)用文本詞條，圖片路徑等資源。

2. 編碼

本次需要在zh-CN.json和index.hml 2個(gè)文件里編碼，在common目錄下導(dǎo)入若干張圖片。

zh-CN.json

{
 "Strings": {
 "title": "華為智慧屏",
 "subtitle": "歷史觀看",
 "tab": ["首頁","電影","電視劇","購物","溪村風(fēng)景","圖冊(cè)","少兒","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": {
 }
 }

index.hml

<div class ="container">
 <div class ="tv_box">
 <div class ="title_box">
  <text class ="title">{{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 ="listItem" class ="list_img">
     <image focusable ="true" class ="tab_img" src ="{{imgindex}}"></image>
    </list-item>
    </block>
   </list>
   <div class ="subtitle_box">
    <text class ="subtitle">{{subtitle}}
    </text>
   </div>
   <list class ="img_list">
    <block for ="{{deatilitem in $t('Strings.details')}}">
    <list-item type ="listItem" class ="list_box">
     <image focusable ="true" class ="img_img" src ="{{deatilitem.pic}}"></image>
     <text class ="img_text">{{deatilitem.text}}
     </text>
    </list-item>
    </block>
   </list>
   </div>
  </block>
  </tab-content>
 </tabs>
 </div>
</div>

3.申請(qǐng)調(diào)試簽名證書

本工程已經(jīng)提前為您申請(qǐng)了證書，存放在cer目錄下。

4. 配置調(diào)試簽名證書

點(diǎn)擊File→Project Structure進(jìn)行簽名配置即可，其中，debug表示調(diào)試簽名證書，release表示發(fā)布簽名證書。Store Password和KeyPassword一樣，均為helloharmonyos123

配置完成后點(diǎn)擊OK，自動(dòng)在entry/build.gradle生成簽名代碼塊。

你也可以如上圖一樣，配置成絕對(duì)路徑，如：

certpath file('./../cer/helloharmonyos.cer')

四. 編譯構(gòu)建hap包

部署并運(yùn)行五.布局截圖：

啟動(dòng)模擬器，登錄華為開發(fā)者賬號(hào)。

選擇智慧屏模擬器（HD）。

將hap包部署到智慧屏上，并運(yùn)行（run）。

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

五、恭喜你

干得好，你已經(jīng)成功完成了HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)，并學(xué)到了：

如何創(chuàng)建一個(gè)HarmonyOS Project申請(qǐng)/配置調(diào)試簽名證書編譯構(gòu)建hap包將hap包部署到智慧屏遠(yuǎn)程模擬器上，并運(yùn)行

到此這篇關(guān)于HarmonyOS實(shí)現(xiàn)HelloWorld應(yīng)用開發(fā)E2E體驗(yàn)的文章就介紹到這了,更多相關(guān)HarmonyOS HelloWorld 內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！