sroxck

sroxck

HomeArchives

DevEco Studio Basics

147
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
### Key Technical Concepts of HarmonyOS Development 1. **Unified Development**: One development process for multiple platforms. 2. **Flexible Integration**: Components can be separated or combined freely. 3. **Unified Ecosystem**: Native intelligence across the ecosystem. **DevEco Studio** simplifies the installation and configuration process by integrating HarmonyOS SDK, Node.js, and other tools. The HarmonyOS SDK is pre-installed, and developers can access it directly within the DevEco Studio directory. **Installation**: Download and install from the official website. **Enabling Chinese Plugin**: Go to File > Settings > Plugins, search for "Chinese," enable it, and restart DevEco Studio. **Code Formatting**: Use `Ctrl + Alt + L` (or `Option + Command + L` on macOS) to format selected code. **Quick Override Methods**: Use `Ctrl + O` to generate subclass methods based on parent class templates. **Constructor Generation**: Quickly create constructors using `Alt + Insert` or right-clicking to select Generate > Constructor. **Previewer Usage**: Supports previewing ArkTS projects for various device types. Real-time preview is enabled by default, refreshing upon saving changes. Developers can customize preview settings using `@Preview` annotations. **Profile Manager**: Allows developers to define custom preview device profiles to view applications on different screen resolutions and languages. **HDC Command**: A command-line tool for debugging and interacting with devices across different operating systems. **macOS Environment Variable Setup**: Instructions provided for setting up the HDC_SERVER_PORT environment variable. **Common HDC Commands**: Refer to the original document for a list of commands.

Three Major Technical Concepts of HarmonyOS Development

  1. One-time development, multi-end deployment;
  2. Can be separated or combined, freely flowing;
  3. Unified ecosystem, native intelligence;

DevEco Studio provides an out-of-the-box development experience, integrating HarmonyOS SDK, Node.js, Hvigor, OHPM, emulator platform, etc., simplifying the installation and configuration process of DevEco Studio.

The HarmonyOS SDK is embedded in DevEco Studio, requiring no additional downloads or configurations.

The HarmonyOS SDK can be found in the DevEco Studio installation directory under DevEco Studio\sdk.

To develop OpenHarmony applications, you can download the OpenHarmony SDK via DevEco Studio > Preferences > OpenHarmony SDK tab.

Installing DevEco Studio#

Just install the installer from the official website.

Enabling the Chinese Plugin#

Click File > Settings > Plugins, select the Installed tab, enter "Chinese" in the search box, and Chinese (Simplified) will appear in the search results. Click Enable on the right side, then click OK.

In the pop-up window, click Restart, and after restarting DevEco Studio, it will take effect.

Code Formatting#

Ctrl + Alt + L (Option+Command + L for macOS) can quickly format the selected range of code.

Quickly Override Parent Class#

DevEco Studio provides Override Methods to assist developers in quickly generating subclass methods based on the parent class template, improving development efficiency. Place the cursor at the subclass definition location, use the shortcut Ctrl+O, or right-click Generate..., select Override Methods, specify the object to override (methods, variables, etc.), and click OK to automatically generate the override code for that object.

Quickly Generate Constructor#

The editor supports quickly generating a corresponding constructor for a class.

Use the shortcut Alt+Insert in the class, or right-click and select Generate..., then choose Constructor in the pop-up window, select one or more parameters for which you want to generate constructors, and click OK. If you select Select None, it will generate a constructor without parameters.

Previewer Usage#

::: tip
Description

  • The preview supports ArkTS projects for Phone, Tablet, 2in1, and Car devices, and JS projects for Litewearable devices.
  • The previewer functionality depends on the OpenGL version of the computer's graphics card, with a requirement of OpenGL version 3.2 or higher.
  • The Ability lifecycle will not run during preview.
  • Preview does not support referencing HSP. Modules that reference HSP do not support preview; please preview or simulate HSP directly in HSP.
  • In preview scenarios, accessing files in the resources directory via relative or absolute paths is not supported.
  • Preview does not support component drag-and-drop.
  • Some APIs do not support preview, such as Ability, App, MultiMedia, etc.
  • Richtext, Web, Video, and XComponent components do not support preview.
  • Calling C++ libraries is not supported in preview.
  • The effect of har when used by applications/services differs on real devices; the actual effect on real devices does not display the menubar, while services display the menubar, but the previewer does not display the menubar. When developing har modules, please note the difference between the previewer effect and the real device effect when used by services.
    :::

Real-time Preview#

During the development of UI code, if you add or delete UI components, simply press Ctrl+S to save, and the previewer will immediately refresh the preview results. If you modify the properties of a component, the previewer will refresh the preview results in real-time (sub-second level), achieving ultra-fast preview effects (current version ultra-fast preview only supports ArkTS components. It supports some data binding scenarios, such as variables decorated with @State). Real-time preview is enabled by default; if you do not need real-time preview, click the button in the upper right corner of the previewer to turn off the real-time preview feature.

::: tip Description
Modifications to configuration files in the resources/base/profile directory (such as main_pages.json/form_config.json) do not trigger real-time preview; developers need to click reload.
:::

Taking ArkTS as an Example, the Method to Use the Previewer is as Follows#

  1. Create or open an ArkTS application/service project. This example opens a local ArkTS Demo project.
  2. In the project directory, open any .ets file (for JS projects, open .hml/.css/.js pages).
  3. You can open the previewer switch in any of the following ways, with the display effect shown in the image below:
  • Through the menu bar, click View > Tool Windows > Previewer to open the previewer.
  • In the upper right corner of the editing window's side toolbar, click Previewer to open the previewer.

Page Preview#

ArkUI preview supports page preview and component preview. The left icon in the image below represents page preview, and the right icon represents component preview.
ArkTS applications/services support page preview. Page preview is achieved by adding @Entry at the top of the project's ets file.

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

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

Component Preview#

ArkTS applications/services support component preview. Component preview supports real-time preview but does not support dynamic graphs and dynamic previews. Component preview is achieved by adding the annotation @Preview before the component, and a maximum of 10 @Preview decorators can be used for custom components in a single source file.

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

The default preview device for component preview is Phone. If you want to see the component preview effect under different devices, different screen shapes, or different device languages, you can set the parameters of @Preview to specify the relevant properties of the preview device. If you do not set the parameters of @Preview, the default device properties are as follows:

@Preview({
  title: 'Component1',  // Name of the preview component
  deviceType: 'phone',  // Specify the device type for current component preview rendering, default is Phone
  width: 1080,  // Width of the preview device, unit: px
  height: 2340,  // Length of the preview device, unit: px
  colorMode: 'light',  // Display light/dark mode, currently supports light
  dpi: 480,  // DPI value of the preview device's screen
  locale: 'zh_CN',  // Language of the preview device, such as zh_CN, en_US, etc.
  orientation: 'portrait',  // Orientation of the preview device, values can be portrait or landscape
  roundScreen: false  // Whether the device's screen shape is round
})

Profile Manager#

Due to the rich variety of real device models, the screen resolutions of different device models may vary. Therefore, during the development of HarmonyOS applications/services, it may be necessary to view the interface display effects on different devices. To address this, the previewer in DevEco Studio provides the Profile Manager feature, allowing developers to customize preview device profiles (including resolution and language), enabling them to view the preview display effects of HarmonyOS applications/services on different devices by defining different preview device profiles. Currently, it supports customizing device resolution and system language.

After defining the device, you can click the button in the upper right corner of the Previewer to open the Profile Manager and switch preview devices.

Real Device vs. Emulator#

You can refer to this section when needed, link Real Device vs. Emulator

HDC Commands#

hdc (HarmonyOS Device Connector) is a command-line tool provided for developers to debug, allowing interaction with devices on Windows/Linux/mac systems.

macOS Environment Variable Setup Method#

  1. Open the terminal tool and execute the following command, then execute different commands based on the output result.
echo $SHELL

If the output is /bin/bash, execute the following command to open the .bash_profile file.

vi ~/.bash_profile

If the output is /bin/zsh, execute the following command to open the .zshrc file.

vi ~/.zshrc
  • Click the letter "i" to enter Insert mode.
  • Enter the following content to add HDC_SERVER_PORT port information to the PATH.
HDC_SERVER_PORT=7035
launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
export HDC_SERVER_PORT
  • After editing, press the Esc key to exit edit mode, then type "" and press Enter to save.
  • Execute the following command to make the configured environment variables take effect.

::: code-group

source ~/.bash_profile

source ~/.zshrc

:::

  • After configuring the environment variables, close and restart DevEco Studio.

Common HDC Commands

This article was synchronized and updated to xLog by Mix Space. The original link is http://www.sroxck.top/posts/harmony/edveco

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.