DEV Community

ZHZL-m
ZHZL-m

Posted on

【Journey of HarmonyOS Next】DevEco Studio User Guide (20)

#harmonyosnext #devecostudio

Image description

1 -> Check the ArkTS/JS preview effect

The previewer supports real-time preview and dynamic preview for ArkTS/JS applications/metaservices.

illustrate

Preview ArkTS projects that support Phone, Tablet, 2in1, and Car devices, and JS projects that support Litewearable devices.
The Previewer feature depends on the OpenGL version of your computer's graphics card, which requires OpenGL version 3.2 and above.
The Ability lifecycle will not be run during preview.
Referencing HSPs is not supported in previews. Modules that reference HSPs do not support preview, please preview or simulate HSPs directly in HSPs.
In the preview scenario, files in the resources directory cannot be accessed through relative paths or absolute paths.
Drag and drop components are not supported in previews.
Some APIs, such as Ability, App, and MultiMedia, do not support preview.
Richtext, Web, Video, and XComponent components do not support previews.
Calls to C++ libraries are not supported for previews.
When HAR is used by the application/meta service, there is a difference in the real machine effect, the actual effect application on the real machine does not display the menubar, and the meta service displays the menubar, but the previewer is subject to the non-display of the menubar. When developing a HAR module, please note that the previewer effect is different from the real machine effect when it is used by the meta service.
Real-time preview: During the development of UI code, if you add or remove UI components, you can simply Ctrl+S to save them, and then the previewer will immediately refresh the preview result. If you modify the properties of a component, the previewer will refresh the preview result in real time (sub-seconds) to achieve the effect of fast preview (the current version of the fast preview only supports ArkTS components.) Some data-bound scenarios, such as @State decorated variables), are supported. If you do not need real-time preview, click the button in the upper right corner of the previewer to disable the real-time preview feature.
illustrate

If you modify the configuration file in the resources/base/profile directory (for example, main_pages.json/form_config.json), the real-time preview cannot be triggered and you need to click Reload.

Image description

Dynamic preview: In the previewer interface, you can operate the interface interaction actions of the application/meta service in the previewer, such as clicking, jumping, and swiping, which is consistent with the interface interaction experience of the application/meta service running on the real device.

Image description

Taking ArkTS as an example, you can use the previewer as follows:

Create or open an ArkTS application/metaservice project. In this example, a local ArkTS demo project is opened.
In the project directory, open any .ets file (for JS projects, open the .hml/.css/.js page).
You can turn on the previewer switch in any of the following ways, and the display effect is shown in the following figure:
From the menu bar, click View > Tool Windows > Former to open the Previewer.
On the side toolbar in the upper-right corner of the editing window, click Preview to open the Previewer.

Image description

2 -> Check the ArkUI preview effect
ArkUI Preview supports page preview and component preview, as shown in the left icon in the figure below

Image description

For a preview of the page, the icon on the right

Image description

Preview for the component.

Image description

2.1 -> Page Preview

Preview of the ArkTS application/meta service support page. The page preview is implemented by adding @Entry to the header of the ETS file of the project.

The following examples are used for the use of @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%')
  }
}
Enter fullscreen mode Exit fullscreen mode

2.2 -> Component Preview

ArkTS applications/metaservices support component previews. Component preview supports real-time preview, but does not support dynamic diagram and dynamic preview. Component previews are implemented by adding annotations @Preview front of the component, and up to 10 @Preview can be used to decorate a custom component in a single source file.

The following example is used for the use of @Preview:

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

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

@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  //设备的屏幕形状是否为圆形
})
Enter fullscreen mode Exit fullscreen mode

Note that if the component being previewed is a component that relies on parameter injection, the recommended way to preview is to define a component fragment in which you declare the component that will be previewed, as well as the input parameters that the component depends on, and annotate the component fragment @Preview indicate that the content in the fragment will be previewed. For example, to preview components such as:

@Component
struct Title {
  @Prop context: string; 
  build() {
    Text(this.context)
  }
}
Enter fullscreen mode Exit fullscreen mode

It is recommended to preview as follows:

@Preview
@Component    //定义组件片段TitlePreview
struct TitlePreview {
  build() {
    Title({ context: 'MyTitle' })    //在该片段中声明将要预览的组件Title，以及该组件依赖的入参 {context: 'MyTitle'}
  }
}
Enter fullscreen mode Exit fullscreen mode

3 -> Profile Manager

Due to the wide variety of device models of real devices, the screen resolution may not be the same for different device models. Therefore, during the development of HarmonyOS applications/metaservices, due to the wide variety of device types, it may be necessary to check the UI display effect on different devices. DevEco Studio's previewer provides the Profile Manager feature, which allows you to customize the preview device profile (including resolution and language), so that you can define different preview device profiles to view the preview display of HarmonyOS applications/metaservices on different devices. Currently, you can customize the device resolution and system language.

Once the device is defined, you can click it in the upper-right corner of the Previewer

Image description

button to open the Profile Manager and toggle the preview device.

Image description

At the same time, Profile Manager also supports multi-device preview.

The following describes how to use the Device Profile Manager by using a custom phone device.

  1. On the Previewer screen, open the Profile Manager page.

Image description

  1. On the Profile Manager screen, click the + New Profile button to add devices.

Image description

  1. On the Create Profile page, enter the information about the new device, such as Profile ID, Device type, Resolution, and Language and region. The device type can only be selected for devices that have been defined in the deviceTypes field in module.json5.

Image description

  1. After the device information is complete, click OK to complete the creation.

Top comments (0)