HarmonyOS Developer DevEco Studio使用指南-查看应用/服务效果

使用预览器查看应用/服务效果

在HarmonyOS应用/服务开发过程中，DevEco Studio为开发者提供了UI界面预览功能，可以查看应用/服务的UI界面效果，支持JS、ArkTS、Java应用/服务的预览。预览器支持布局代码的实时预览，只需要将开发的源代码进行保存，就可以通过预览器实时查看应用/服务运行效果，方便开发者随时调整代码。

说明

由于操作系统和真机设备的差异，在预览界面中可能出现字体、颜色等与真机设备运行的效果存在差异，预览效果仅作为应用/服务开发过程中的参考，实际最终效果请以真机设备运行效果为准。

为了更好的使用体验，建议先将DevEco Studio升级至最新版本，然后在HarmonyOS SDK中检测并更新SDK至最新版本。

查看ArkTS和JS应用/服务预览效果

预览器支持JS和ArkTS应用/服务“实时预览”和“动态预览”。

说明

• 预览Phone、Tablet、TV和Wearable设备的JS/ArkTS工程，预览器功能依赖于电脑显卡的OpenGL版本，OpenGL版本要求为3.2及以上。
• richtext、web、video、XComponent组件不支持预览。
• 不支持调用C++库的预览。

• 实时预览：在开发界面UI代码过程中，如果添加或删除了UI组件，您只需Ctrl+S进行保存，然后预览器就会立即刷新预览结果。如果修改了组件的属性，则预览器会实时（亚秒级）刷新预览结果，达到极速预览的效果（API 8工程的极速预览仅在非数据绑定场景生效，如涉及数据绑定，仍需要在文件保存后才可以预览；API 9工程的极速预览支持部分数据绑定场景，如@State变量），当前版本支持ArkTS组件。实时预览默认开启，如果不需要实时预览，请单击预览器右上角

按钮，关闭实时预览功能。

• 动态预览：在预览器界面，可以在预览器中操作应用/服务的界面交互动作，如单击、跳转、滑动等，与应用/服务运行在真机设备上的界面交互体验一致。

在使用预览器前，请根据如下项检查环境信息：

• 确保File > Settings > SDKs > HarmonyOS中，已下载Previewer资源。如果已下载Previewer，但存在新版本的情况，建议升级到最新版本，详情请参考​​下载HarmonyOS SDK​​。
• 建议将File > Settings > SDKs > HarmonyOS中的SDK更新至最新版本。

以ArkTS为例，使用预览器的方法如下：

1. 创建或打开一个ArkTS应用/服务工程。本示例以打开一个本地ArkTS Demo工程为例。
2. 在创建的工程目录下，打开任意一个.ets文件（JS工程请打开.hml/.css/.js页面）。
3. 可以通过如下任意一种方式打开预览器开关，显示效果如下图所示：

     ○  通过菜单栏，单击View>Tool Windows>Previewer打开预览器。

     ○  在编辑窗口右上角的侧边工具栏，单击Previewer，打开预览器。

查看ArkTS组件预览效果

ArkTS应用/服务支持组件预览，要求compileSdkVersion为8或以上。组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。

@Preview的使用参考如下示例

@Preview({
  title: 'FoodImage'
})
@Component
struct FoodImageDisplayPreview {
  build() {
    Flex() {
      FoodImageDisplay({ foodItem: getDefaultFoodData() })
    }
  }
}

以上示例的组件预览效果如下图所示：

组件预览默认的预览设备为Phone，若您想在不同的设备，或者不同的屏幕形状，或者不同设备语言等情况下的组件预览效果，可以通过设置@Preview的参数，指定预览设备的相关属性。若不设置@Preview的参数，默认的设备属性如下所示：

@Preview({
  title: 'Component1'  //预览组件的名称
  deviceType: 'phone',  //指定当前组件预览渲染的设备类型，默认为Phone
  width: 1080,  //预览设备的宽度，单位：px
  height: 2340,  //预览设备的长度，单位：px
  colorMode: 'light',  //显示的亮/暗模式，取值为light或dark
  dpi: 480,  //预览设备的屏幕DPI值
  locale: 'zh_CN',  //预览设备的语言，如zh_CN、en_US等
  orientation: 'portrait',  //预览设备的横竖屏状态，取值为portrait或landscape
  roundScreen: false  //设备的屏幕形状是否为圆形
})

请注意，如果被预览的组件是依赖参数注入的组件，建议的预览方式是：定义一个组件片段，在该片段中声明将要预览的组件，以及该组件依赖的入参，并在组件片段上标注@Preview注解，以表明将预览该片段中的内容。例如，要预览如下组件：

@Component
struct Title {
  context: string
  build() {
    Text(this.context)
  }
}

建议按如下方式预览：

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

查看Java应用/服务预览效果

Java预览器支持Phone、Tablet、Car、TV和Wearable设备的Java应用/服务布局预览。Java应用/服务的布局支持Java代码布局和XML布局两种方式，其中Java代码布局（AbilitySlice.java或Ability.java文件）支持实时预览界面布局效果，同时还可以动态预览应用/服务的交互效果，如单击、跳转、滑动等互动式操作；XML布局文件可以实时预览，修改和保存了XML代码后，预览器会实时展示应用/服务的布局效果。

说明

Java文件预览是实验特性，使用中还存在以下约束。

• macOS版本的Java预览器功能，只支持API Version 5及以上版本。
• 如果xml依赖Java文件中的数据，当修改了xml布局文件后，需要通过启动Java文件预览的方式来查看布局效果。
• 如果xml中引用了Java的自定义组件，不支持预览。
• 只支持​​ohos.agp.components​​中的相关UI组件。
• 只支持jpeg/jpg、png、bmp和wbmp格式的图片预览。
• 不支持HarmonyOS Library模块的预览。
• 不支持Ability间跳转的预览。
• 不支持通过JNI调用C++库的预览。

在使用Java预览器前，请根据如下项检查环境信息：

• 需要确保File > Settings > HarmonyOS SDK中，已下载对应版本的Previewer资源，如果已下载Previewer，但存在新版本的情况，需要升级到最新版本。
• File > Settings > HarmonyOS SDK中的Java SDK需要更新至最新版本。

使用Java预览器的方法如下：

1. 创建或打开一个Java应用/服务工程。本示例以创建一个新的Java工程为例，具体请参考​​创建一个新的工程​​。
2. 在创建的工程目录下，根据布局方式，打开布局文件：

    ○ JavaUI布局：打开一个AbilitySlice.java或Ability.java文件。

说明

JavaUI布局预览功能是实验特性：

• Windows系统：请通过File > Settings > Previewer下勾选“Enable java previewer”开启。
• macOS系统：请通过DevEco Studio > Preferences > Previewer下勾选“Enable java previewer”开启。

    ○ XML布局：打开一个resources > base > layout目录下的xml布局文件。

3. 可以通过如下任意一种方式打开预览器开关，显示效果如下图所示：

• 通过菜单栏，单击View > Tool Windows > Previewer打开预览器。
• 在编辑窗口右上角的侧边工具栏，单击Previewer，打开预览器。

Profile Manager

说明

该特性在DevEco Studio V2.2 Beta2及更高版本中支持。

由于真机设备有丰富的设备型号，比如Phone设备，包括Mate30、Mate40、P40、P50等设备，不同设备型号的屏幕分辨率可能不一样。因此，在HarmonyOS应用/服务开发过程中，由于设备类型繁多，可能不能查看在不同设备上的界面显示效果。对此，DevEco Studio的预览器提供了Profile Manager功能，支持开发者自定义预览设备Profile（包含分辨率和语言），从而可以通过定义不同的预览设备Profile，查看HarmonyOS应用/服务在不同设备上的预览显示效果。当前支持自定义设备分辨率及系统语言，如果是Lite Wearable设备类型，还支持自定义屏幕形状。

定义设备后，可以在Previewer右上角，单击

按钮，打开Profile管理器，切换预览设备。

同时，Profile Manager还支持多设备预览功能，具体请参考​​查看多端设备预览效果​​。

下面以自定义一款Phone设备为例，介绍设备Profile Manager的使用方法。

1. 在预览器界面，打开Profile Manager界面。

2. 在Profile Manager界面，单击+ New Profile按钮，添加设备。

3. 在Create Profile界面，填写新增设备的信息，如Profile ID（设备型号）、Device type（设备类型）、Resolution（分辨率）和Language and region（语言和区域）等。其中Device type只能选择config.json（Stage工程中为module.json5）中deviceType字段已定义的设备。

4. 设备信息填写完成后，单击OK完成创建。

查看多端设备预览效果

DevEco Studio支持HarmonyOS分布式应用/服务开发，同一个应用/服务可以运行在多个设备上。在HarmonyOS分布式应用/服务的开发阶段，因不同设备的屏幕分辨率、形状、大小等不同，开发者需要在不同的设备上查看应用/服务的UI布局和交互效果，此时便可以使用多端设备预览器功能，方便开发者在应用/服务开发过程中，随时查看不同设备上的运行效果。

说明

多端设备预览最多同时支持4个设备的预览。

前面介绍了DevEco Studio支持JS、ArkTS和Java应用/服务的预览器功能，多端设备预览器支持JS、ArkTS与Java应用/服务在不同设备上的同时预览。如果两个设备支持的编码语言不同，就不能使用多端设备预览功能，例如，Java语言的Phone的应用/服务，是不支持在LiteWearable上运行的，因为LiteWearable不支持Java语言。

下面以JS应用/服务为例，介绍多端设备预览器的使用方法，ArkTS和Java应用/服务的多端设备预览器使用方法相同。

1. 在工程目录中，打开任意一个hml页面（ArkTS请打开ets文件，Java请打开AbilitySlice.java或Ability.java文件）。
2. 可以通过如下任意一种方式打开预览器开关，显示效果如下图所示：

    ○   通过菜单栏，单击View>Tool Windows>Previewer，打开预览器。

    ○   在编辑窗口右上角的侧边工具栏，单击Previewer，打开预览器。

3. 在Previewer窗口中，打开Profile Manager中的Multi-profile preview开关，同时查看多设备上的应用/服务运行效果。

说明

多端设备预览不支持动画的预览，如果需要查看动画在设备上的预览效果，请关闭Multi-device preview功能后在单设备预览界面进行查看。

多设备预览效果如下图所示：

Inspector双向预览

​DevEco Studio提供HarmonyOS应用/服务的UI预览界面与源代码文件间的双向预览功能，支持ets文件、hml文件及xml文件与预览器界面的双向预览。使用双向预览功能时，需要在预览器界面单击

图标打开双向预览功能。

说明

暂不支持服务卡片的双向预览功能。

开启双向预览功能后，支持代码编辑器、UI界面和Component Tree 组件树三者之间的联动：

• 选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。
• 选中布局文件中的代码块，则在UI界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。
• 选中组件树中的组件，则对应的代码块和UI界面也会高亮显示。

在预览界面还可以通过组件的属性面板修改可修改的属性或样式，在预览界面修改后，预览器会自动同步到代码编辑器中修改源码，并实时的刷新UI界面；同样的，如果在代码编辑器中修改源码，也会实时刷新UI界面，并更新组件树信息及组件属性。

说明

• 如果组件有做数据绑定，则其属性不支持在属性面板修改。
• 如果界面有使用动画效果或者带动画效果组件，则其属性不支持在属性面板修改。
• 多设备预览时，不支持双向预览。

PreviewMock数据模拟

在预览场景中，由于代码的运行环境与真机设备上的运行环境不同，调用部分接口时无法获取到有效的返回值（例如获取电池电量信息等，在预览场景下getVoltage() 返回的是一个固定的值0，这样开发者就无法在预览时查看到不同返回值带来的界面变化。因此，DevEco Studio提供了PreviewMock数据模拟功能，在不改变业务运行逻辑的同时，开发者可以模拟API或者业务代码中的各种method（不包括构造方法）的返回值和对象中的Field（不包括final字段）的值。

使用PreviewMock数据模拟功能，需要在模块的build.gradle中添加其依赖，然后重新同步工程。

dependencies {
    ...
    implementation group: 'com.huawei.deveco', name: 'previewer-mock-core', version: '1.0.0.1'
}

对Method的Mock

1. 在源码目录下新建一个class，该class继承com.huawei.asm.core.PreviewerMock。

public class MockClassB extends PreviewMock{

}

2. 在class中添加com.huawei.asm.core.annotation.PreviewerMockMethod注解，然后定义一个和原方法同名的方法（支持public、private、protected、static和final的方法）。提供如下两种Method的Mock方法：

public class MockClassB extends PreviewMock{
    //对方法返回值的Mock，例如对一个BatteryInfo类的getVoltage()方法的Mock
    @PreviewerMockMethod
    public int getVoltage(BatteryInfo batteryInfo) {  //第一个参数为原方法的对象，后面的参数为原方法本身参数。
        return 30;
    }

    //对方法入参的Mock，例如对MainAbilitySlice的onStart方法的Mock
    @PreviewerMockMethod
    public void onStart(MainAbilitySlice mainAbilitySlice, Intent intent) {  //第一个参数为原方法的对象，后面的参数为原方法本身参数。
       intent.setBundle("mock bundle Name");
       mainAbilitySlice.onStart(intent);
    }
}

3. 在原方法中添加Hilog日志，方便在预览时，在PreviewerLog中打印获取返回值，从而验证Mock是否生效。

//在获取电量信息的方法中添加Hilog日志
HiLog.debug(hiLoglabel, batteryInfo.getVoltage() + "");

//在OnStart方法中添加Hilog日志
HiLog.debug(hiLoglabel, intent.getBundle() + "");

对Field值的Mock

对Field值的Mock分为private/public/protected非静态字段和static字段两种

• 对private/public/protected非静态字段的Mock：
  在原代码调用Field之前，添加Mock代码，格式为public static <T> void mockField(Object ref, String fieldName, T fieldValue)。其中第一个参数为要Mock的对象，第二个参数为要Mock的字段的名称，第三个参数为想要Mock的值。然后在HiLog中打印日志，验证Mock是否生效。

PreviewerFieldMock.mockField(sensorData, "accuracy", 20);
HiLog.debug(hiLoglabel, sensorData.accuracy + "");

• 对static静态字段的Mock：

在原代码调用Field之前，添加Mock代码，public static <T> void mockStaticField(Class<?> obj, String fieldName, T fieldValue)。第一个参数为要Mock的Class，第二个参数为要Mock的字段的名称，第三个参数为想要Mock的值。然后在HiLog中打印日志，验证Mock是否生效。

PreviewerFieldMock.mockStaticField(Demo.class, "staticName", "mock static name");
HiLog.debug(hiLoglabel, "mock Demo Static : " + Demo.staticName);

将SVG文件转换为XML文件

SVG（Scalable Vector Graphics）可缩放矢量图形，是一种图像文件格式。目前Java语言的工程不支持使用SVG格式的图片，开发者需要将SVG格式的图片文件转换为XML格式的文件，然后在布局文件中引用转换后的XML文件。这样，就可以在模拟器/预览器或者设备上运行应用/服务时，正常的渲染该图像文件。转换方法如下：

1. 选中应用/服务模块，单击鼠标右键，选择New>Svg To Xml。

2. 选择需要转换的svg文件，并命名，单击OK开始转换。

3. 转换成功后，可以在resources > base > graphic文件下找到转换后的xml文件，并在布局文件中，引用该xml文件名即可完成对图标文件的引用。

代码Code linter检查

DevEco Studio针对代码进行JS/ArkTS语法规范检查，并根据扫描结果提示进行修改，在代码开发阶段，保证代码的正确性。

检查方法：鼠标选中已打开的代码编辑文件、或者鼠标单击选中文件或文件夹，或者按Ctrl+鼠标单击选中多个文件，然后单击鼠标右键，选中Code Linter。

扫描完成后：

• 双击某个扫描结果可以跳转到对应代码，可以根据Defect Description的建议进行修改。
• 如果某个扫描结果不需要修改，可以对该扫描结果进行屏蔽，屏蔽后再执行Code Linter将不再显示该扫描结果。

    ○  在扫描结果末尾，点击shield按钮可以屏蔽该行的code linter检查。

    ○  如需恢复屏蔽的错误信息，可以在.idea>shield_config.xml中删除某条屏蔽信息，或者直接删除.idea>shield_config.xml文件来删除全部屏蔽信息。

文章转载自：​​https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/hos-code-linter-0000001363071681-V3​​