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