1.4　創建第一個HarmonyOS項目

至此，HarmonyOS的開發環境全部搭建完成了。接下來我們創建第一個Harmony項目。

DevEco Studio支持包括手機、車載、智慧屏、智能穿戴、輕量級智能穿戴等多設備下的HarmonyOS應用開發，提供了包括Java、JS、C/C++等多種編程語言，并支持多種語言的混合開發場景。在新建工程時，可以在DevEco Studio中選擇并創建適用于各種設備的工程，并自動生成對應的工程模板和代碼。具體的設備類型和支持的工程模板及開發語言的對應關系如表1.1所示。

表1.1　各設備類型和支持的工程模板及開發語言

同時，除上述所示，手機也包含7個應用模板，其中覆蓋了新聞、購物等場景，有相應開發需求的開發者可以直接使用應用模板。

下面以TV為例，創建一個Java項目并在模擬器上運行。

1.4.1　創建第一個項目

首先，打開工程創建向導界面。如果當前沒有打開任何工程，則在DevEco Studio歡迎頁選擇Create HarmonyOS Project。若已經打開了工程，則在上方菜單欄選擇File→New→New Project。工程創建向導界面如圖1.27所示。

圖1.27　工程創建向導

其中，Device包含各種設備類型，Template包含各種模板及支持的語言。首先選擇需要進行開發的設備類型，然后選擇對應的Ability模板類型。這里以智慧屏TV為例，選擇一個空的Ability模板Empty Feature Ability（Java），其支持Java語言。單擊Next按鈕對工程進行配置，如圖1.28所示。

圖1.28　工程配置

其中，Project Name表示工程的名稱，可以自定義，此應用安裝到設備之后也會在設備上顯示該名稱。Package Name表示軟件包的名稱，默認情況下應用的ID也會使用該名稱，應用發布時，軟件包名需要保持唯一性。Save Location表示工程文件的本地存儲路徑，無特殊要求則保持默認即可，注意存儲路徑中不能包含中文字符。Compatible SDK指兼容的SDK版本。配置完成后單擊Finish按鈕，工程即創建完成，如圖1.29所示。

圖1.29　工程創建成功

1.4.2　模擬器運行及預覽

創建完上述項目后，DevEco Studio會自動生成Hello World項目中所需的代碼，因此該項目不用自行編寫代碼，就可以正常運行Hello World程序。應用程序的運行需要基于設備，可以使用搭載HarmonyOS的設備，也可以使用DevEco Studio內置的模擬器。這里通過內置模擬器來運行該程序。

首先在DevEco Studio上方的菜單欄選擇Tools→HVD Manager，首次使用模擬器時，需要下載相關資源。彈出下方提示框后，單擊OK按鈕，如圖1.30所示。

圖1.30　下載模擬器資源

隨后瀏覽器會彈出華為賬號的登錄界面，如圖1.31所示。需要先登錄已完成實名認證的華為賬號。這里官方推薦使用Chrome瀏覽器，如果使用Safari或360等其他瀏覽器，則需要取消“阻止跨站跟蹤”和“阻止所有Cookie”功能。

圖1.31　實名認證華為賬號登錄

返回DevEco Studio，單擊Virtual Device Manager界面左下方的Refresh按鈕進行授權登錄，并完成下載。下載完成后會顯示設備列表，如圖1.32所示。

圖1.32　模擬器設備列表

在設備列表中，選擇TV設備，單擊右側的按鈕運行模擬器，并返回DevEco Studio主界面，單擊右上角工具欄中的按鈕或按快捷鍵Shift+F10運行工程，在彈出的Select Deployment Target界面中選擇相應的Connected Devices，并單擊OK按鈕，即可看到Hello World程序成功運行在TV模擬器上，如圖1.33所示。

圖1.33　Hello World程序運行在TV模擬器上

同時，DevEco Studio還支持多設備預覽器和模擬器，在預覽器中，可以實時查看應用的布局效果，同時還支持多設備的同時預覽，查看同一個布局文件在不同設備上的呈現效果。這里新建一個JS工程，選擇Phone設備下的Empty Feature Ability（JS），如圖1.34所示。

圖1.34　創建Phone設備下的JS工程

打開工程目錄entry→src→main下的config.json文件，在module配置標簽下的deviceType字段中，增加需要支持的設備類型，如增加TV、Wearable設備，代碼如下：

    {
    ……
      "module":{
        "package":"com.example.myapplication",
        "name":".MyApplication",
        "deviceType":[
          "phone",
    "tv",
          "wearable"
        ],
      ……
      }
    }

在創建的工程目錄下，打開一個entry→src→main→js→pages下的HML、CSS或者JS文件，然后在編輯窗口右上角的側邊工具欄中單擊Previewer，打開預覽器，如圖1.35所示。或者也可以通過菜單欄選擇View→Tool Windows→Previewer，打開預覽器。

圖1.35　單擊Previewer，打開預覽器

打開index.css文件，將.title下的font-size由100px變為200px，即讓Hello World的文字變大，代碼如下：

    /*index.css*/
    .container{
        flex-direction:column;
         justify-content:center;
        align-items:center;
    }
　　
    .title {
    font-size:200px;
    }

修改完成后，可以立即在Previewer窗口的預覽器中看到界面中“您好世界”的文字實時改變，從而可以實時查看界面的布局效果。實時變化后預覽器的效果如圖1.36所示。

圖1.36　預覽器實時變化效果

在預覽器窗口中，可以通過預覽器頂部的設備圖標切換當前設備，打開Multi-Preview開關，可以同時查看多設備上的應用的運行效果。打開Multi-Preview開關，多設備預覽效果如圖1.37所示。

圖1.37　跨設備實時預覽