HarmonyOS應用開發 — HelloWorld應用開發E2E體驗

感謝關注HarmonyOS，為了便于大家學習特将鴻蒙2.0基礎教學内容整理如下：

1、HarmonyOS應用開發—視訊播放

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap1/index.html#0

2、HarmonyOS應用開發—基本控件

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap2/index.html#0

3、HarmonyOS應用開發—UI開發與預覽

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-ui/index.html#0

4、HarmonyOS應用開發—裝置虛拟化特性開發

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-screenhardware/index.html#0

5、HarmonyOS應用開發—HelloWorld應用開發E2E體驗

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-HelloWorld/index.html#0

6、HarmonyOS應用開發—有界面元程式互動

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap6/index.html#0

7、HarmonyOS應用開發-分布式任務排程

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap5/index.html#0

8、HarmonyOS應用開發—剪切闆

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap4/index.html#0

9、HarmonyOS應用開發—應用偏好資料讀寫

https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap3/index.html#0

以下為HarmonyOS應用開發—HelloWorld應用開發E2E體驗節選部分，如想進一步了解，請點選：HarmonyOS應用開發—HelloWorld應用開發E2E體驗

一、介紹

本篇将實作的内容

智慧屏是首個搭載HarmonyOS的終端産品，通過HarmonyOS智慧屏多頁簽應用開發，讓開發者了解HarmonyOS應用開發的全流程，20分鐘快速上手，實作從工程建立到應用上架全過程。

您将建立什麼

在這個Codelab中，您将使用HUAWEI DevEco Studio（IDE）開發HarmonyOS智慧屏多頁簽應用，完成開發者證書申請，工程建立、編譯建構、應用調試，并實作HarmonyOS智慧屏部署和運作。

您将學到什麼

1. 如何建立一個HarmonyOS Project
2. 申請/配置調試簽名證書
3. 編譯建構hap包
4. 将hap包部署到智慧屏遠端模拟器上，并運作

二、您需要什麼

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基礎開發能力。

三、能力接入準備

實作HarmonyOS智慧屏部署和運作，需要完成以下準備工作：

1. HUAWEI DevEco Studio環境搭建
2. HarmonyOS門戶申請調試證書

具體操作，請按照《HUAWEI DevEco Studio使用指南》中詳細說明來完成。

具體操作，請按照《DevEco Studio使用指南》中詳細說明來完成。

提示：需要通過注冊成開發者才能完成內建準備中的操作。

四、HarmonyOS應用開發

1. 建立工程

建立一個空工程，選擇多頁簽Tab Feature Ability類型，并命名工程名和包名。

一起看看工程目錄結構

目錄結構中檔案分類如下：

1. .hml結尾的HML模闆檔案，這個檔案用來描述目前頁面的檔案布局結構，類似于網頁中的HTML檔案。
2. .css結尾的CSS樣式檔案，這個檔案用于描述頁面樣式。
3. .js結尾的JS檔案，這個檔案用于處理頁面和使用者的互動。

各個檔案夾的作用：

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

2. 編碼

本次需要在zh-CN.json和index.hml 2個檔案裡編碼，在common目錄下導入若幹張圖檔。

zh-CN.json

{
  "Strings": {
    "title": "華為智慧屏",
    "subtitle": "曆史觀看",
    "tab": ["首頁","電影","電視劇","購物","溪村風景","圖冊","少兒","VIP"],
"images": ["/common/img-large1.png","/common/img-large2.png","/common/img-large3.png","/common/img-large4.png"],
"text": "文本内容",
"details": [
{
      "text": "花園",
      "pic": "/common/img-small1.png"
    },
    {
      "text": "風景一覺",
      "pic": "/common/img-small2.png"
    },
  {
     "text": "藍天白雲",
     "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.申請調試簽名證書

本工程已經提前為您申請了證書，存放在cer目錄下。

4. 配置調試簽名證書

點選File→Project Structure進行簽名配置即可，其中，debug表示調試簽名證書，release表示釋出簽名證書。Store Password和KeyPassword一樣，均為helloharmonyos123

配置完成後點選OK，自動在entry/build.gradle生成簽名代碼塊。

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

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

• 1

四. 編譯建構hap包

1. 部署并運作

五.布局截圖：

啟動模拟器，登入華為開發者賬号。

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

将hap包部署到智慧屏上，并運作（run）。

至此，你已經成功開發出第一個HarmonyOS應用，歡迎進入HarmonyOS世界！

五、恭喜你

幹得好，你已經成功完成了HelloWorld應用開發E2E體驗，并學到了：

1. 如何建立一個HarmonyOS Project
2. 申請/配置調試簽名證書
3. 編譯建構hap包
4. 将hap包部署到智慧屏遠端模拟器上，并運作