sroxck

sroxck

HomeArchives

DevEco Studio Basics

147
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
**Three Key Technical Concepts of HarmonyOS Development:** 1. **One Development, Multi-Platform Deployment:** Develop once and deploy across various devices. 2. **Modular Flexibility:** Components can be separated or combined freely. 3. **Unified Ecosystem with Native Intelligence:** A cohesive ecosystem that supports native smart features. **DevEco Studio Features:** - Offers an integrated development experience with HarmonyOS SDK, Node.js, and other tools, simplifying installation and configuration. - HarmonyOS SDK is pre-installed within DevEco Studio, eliminating the need for separate downloads. - Users can download OpenHarmony SDK through the preferences menu. **Installation and Setup:** - Download and install DevEco Studio from the official website. - Enable Chinese language support via the plugins settings. - Code formatting and quick methods for overriding parent class methods and generating constructors are available to enhance development efficiency. **Previewer Functionality:** - Supports real-time previews for various device types (phones, tablets, etc.) with specific requirements for OpenGL. - Allows developers to preview UI changes instantly and manage device profiles for different resolutions and languages. **HDC Command Tool:** - A command-line tool for debugging and interacting with devices across different operating systems. - Instructions for setting environment variables on macOS are provided. This summary encapsulates the main features and functionalities of HarmonyOS development using DevEco Studio, focusing on its technical concepts, installation, preview capabilities, and debugging tools.

Three Major Technical Concepts of Harmony 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, no additional download or configuration is required.

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 through DevEco Studio > Preferences > OpenHarmony SDK tab.

Install DevEco Studio#

Simply install from the official download program.

Enable Chinese Language 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, then click OK.

Click Restart in the pop-up window, 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 need to generate a constructor, and click OK. If you select Select None, a constructor without parameters will be generated.

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, requiring 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 within 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, XComponent components do not support preview.
  • Calling C++ libraries is not supported in preview.
  • The har effect differs when used by applications/services; the actual effect on the device does not display the menubar, while the service displays the menubar, but the previewer does not display the menubar. When developing har modules, please note the difference between the previewer effect and the actual device effect when used by services.
    :::

Real-time Preview#

During the UI code development process, 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 the components, 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.
:::

Using the Previewer with ArkTS as an Example#

  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 using any of the following methods, as 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 is for page preview, and the right icon is for component preview.
ArkTS applications/services support page preview. Page preview is achieved by adding @Entry at the beginning 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; 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,  // Height of the preview device, unit: px
  colorMode: 'light',  // Display light or dark mode, currently supports light
  dpi: 480,  // Screen DPI value of the preview device
  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 variety of device models, different device models may have different screen resolutions. Therefore, during HarmonyOS application/service development, 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, custom device resolution and system language are supported.

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 for debugging, allowing interaction with devices on Windows/Linux/mac systems.

macOS Environment Variable Setup Method#

  1. Open the terminal tool and execute the following command. Based on the output result, execute different commands.
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 is 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.