DevEco Studio 基礎

鸿蒙開發三大技術理念

一次開發，多端部署；
可分可合，自由流轉；
統一生態，原生智能；

DevEco Studio 提供開箱即用的開發體驗，將 HarmonyOS SDK、Node.js、Hvigor、OHPM、模擬器平台等進行合一打包，簡化 DevEco Studio 安裝配置流程。

HarmonyOS SDK 已嵌入 DevEco Studio 中，無需額外下載配置。

HarmonyOS SDK 可以在 DevEco Studio 安裝位置下 DevEco Studio\sdk 目錄中查看。

如需進行 OpenHarmony 應用開發，可通過 DevEco Studio > Preferences > OpenHarmony SDK 頁簽下載 OpenHarmony SDK。

安裝 DevEco Studio#

從官方下載程序安裝即可

啟用中文化插件#

單擊 File > Settings > Plugins，選擇 Installed 頁簽，在搜索框輸入 “Chinese”，搜索結果裡將出現 Chinese (Simplified)，在右側單擊 Enable，單擊 OK

在彈窗中單擊 Restart，重啟 DevEco Studio 後即可

代碼格式化#

Ctrl + Alt + L（macOS 為 Option+Command +L）可以快速對選定範圍的代碼進行格式化。

快速覆寫父類#

DevEco Studio 提供 Override Methods，輔助開發者根據父類模板快速生成子類方法，提升開發效率。將光標放於子類定義位置，使用快捷鍵 Ctrl+O，或右鍵單擊 Generate...，選擇 Override Methods，指定需要覆寫的對象（方法、變量等），點擊 OK 將自動生成該對象的覆寫代碼。

快速生成構造器#

編輯器支持為類快速生成一個對應的構造函數。

在類中使用快捷鍵 Alt+Insert，或單擊鼠標右鍵選擇 Generate...，在彈窗中選擇 Constructor，選擇一個或多個需要生成構造函數的參數，點擊 OK。若選擇 Select None，則生成不帶參數的構造器。

預覽器使用#

::: tip
說明

預覽支持 Phone、Tablet、2in1、Car 設備的 ArkTS 工程，支持 Litewearable 設備的 JS 工程。
預覽器功能依賴於電腦顯卡的 OpenGL 版本，OpenGL 版本要求為 3.2 及以上。
預覽時將不會運行 Ability 生命週期。
預覽不支持引用 HSP。引用了 HSP 的模塊不支持預覽，請直接在 HSP 內預覽或模擬 HSP。
預覽場景下，不支持通過相對路徑及絕對路徑的方式訪問 resources 目錄下的文件。
預覽不支持組件拖拽。
部分 API 不支持預覽，如 Ability、App、MultiMedia 等模塊。
Richtext、Web、Video、XComponent 組件不支持預覽。
不支持調用 C++ 庫的預覽。
har 在被應用 / 服務使用時真機效果有區別，真機上實際效果應用不顯示 menubar，服務顯示 menubar，但預覽器都以不顯示 menubar 為準。若開發 har 模塊時，請注意被服務使用時預覽器效果與真機效果的不同。
:::

實時預覽#

在開發界面 UI 代碼過程中，如果添加或刪除了 UI 組件，您只需 Ctrl+S 進行保存，然後預覽器就會立即刷新預覽結果。如果修改了組件的屬性，則預覽器會實時（亞秒級）刷新預覽結果，達到極速預覽的效果（當前版本極速預覽僅支持 ArkTS 組件。支持部分數據綁定場景，如 @State 裝飾的變量）。實時預覽默認開啟，如果不需要實時預覽，請單擊預覽器右上角按鈕，關閉實時預覽功能

::: tip 說明
開發者修改 resources/base/profile 目錄下的配置文件（如 main_pages.json/form_config.json），不支持觸發實時預覽，開發者需要點擊重新加載。
:::

以 ArkTS 為例，使用預覽器的方法如下#

創建或打開一個 ArkTS 應用 / 服務工程。本示例以打開一個本地 ArkTS Demo 工程為例。
在工程目錄下，打開任意一個.ets 文件（JS 工程請打開.hml/.css/.js 頁面）。
可以通過如下任意一種方式打開預覽器開關，顯示效果如下圖所示

通過菜單欄，單擊 View > Tool Windows > Previewer 打開預覽器。
在編輯窗口右上角的側邊工具欄，單擊 Previewer，打開預覽器。

頁面預覽#

ArkUI 預覽支持頁面預覽與組件預覽，下圖中左側圖標為頁面預覽，右側圖標為組件預覽。
ArkTS 應用 / 服務支持頁面預覽。頁面預覽通過在工程的 ets 文件頭部添加 @Entry 實現。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

組件預覽#

ArkTS 應用 / 服務支持組件預覽。組件預覽支持實時預覽，不支持動態圖和動態預覽。組件預覽通過在組件前添加註解 @Preview 實現，在單個源文件中，最多可以使用 10 個 @Preview 裝飾自定義組件。

@Preview({
  title: 'ContentTable'
})
@Component
struct ContentTablePreview {
  build() {
    Flex() {
      ContentTable({ foodItem: getDefaultFoodData() })
    }
  }
}

組件預覽默認的預覽設備為 Phone，若您想查看不同的設備，或者不同的屏幕形狀，或者不同設備語言等情況下的組件預覽效果，可以通過設置 @Preview 的參數，指定預覽設備的相關屬性。若不設置 @Preview 的參數，默認的設備屬性如下所示：

@Preview({
  title: 'Component1',  //預覽組件的名稱
  deviceType: 'phone',  //指定當前組件預覽渲染的設備類型，默認為Phone
  width: 1080,  //預覽設備的寬度，單位：px
  height: 2340,  //預覽設備的長度，單位：px
  colorMode: 'light',  //顯示的亮暗模式，當前支持取值為light
  dpi: 480,  //預覽設備的屏幕DPI值
  locale: 'zh_CN',  //預覽設備的語言，如zh_CN、en_US等
  orientation: 'portrait',  //預覽設備的橫豎屏狀態，取值為portrait或landscape
  roundScreen: false  //設備的屏幕形狀是否為圓形
})

Profile Manager#

由於真機設備有豐富的設備型號，不同設備型號的屏幕分辨率可能不一樣。因此，在 HarmonyOS 應用 / 服務開發過程中，由於設備類型繁多，可能需要查看在不同設備上的界面顯示效果。對此，DevEco Studio 的預覽器提供了 Profile Manager 功能，支持開發者自定義預覽設備 Profile（包含分辨率和語言），從而可以通過定義不同的預覽設備 Profile，查看 HarmonyOS 應用 / 服務在不同設備上的預覽顯示效果。當前支持自定義設備分辨率及系統語言。

定義設備後，可以在 Previewer 右上角，單擊按鈕，打開 Profile 管理器，切換預覽設備

真機與模擬器#

這部分用到的時候看就行了，鏈接真機與模擬器

HDC 命令#

hdc（HarmonyOS Device Connector）是為開發人員提供的用於調試的命令行工具，通過該工具可以在 windows/linux/mac 系統上與設備進行交互。

macOS 環境變量設置方法#

打開終端工具，執行以下命令，根據輸出結果分別執行不同命令。

echo $SHELL

如輸出結果為 /bin/bash，則執行以下命令，打開.bash_profile 文件。

vi ~/.bash_profile

如輸出結果為 /bin/zsh，則執行以下命令，打開.zshrc 文件。

vi ~/.zshrc

單擊字母 “i”，進入 Insert 模式。
輸入以下內容，在 PATH 路徑下添加 HDC_SERVER_PORT 端口信息

HDC_SERVER_PORT=7035
launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
export HDC_SERVER_PORT

編輯完成後，單擊 Esc 鍵，退出編輯模式，然後輸入 “”，單擊 Enter 鍵保存。
執行以下命令，使配置的環境變量生效。

::: code-group

source ~/.bash_profile

source ~/.zshrc

:::

環境變量配置完成後，關閉並重啟 DevEco Studio。

HDC 常用命令

此文由 Mix Space 同步更新至 xLog
原始鏈接為 http://www.sroxck.top/posts/harmony/edveco