HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:使用预览器查看应用/服务效果

目录

查看应用/服务预览效果

查看eTS组件预览效果

Profile Manager

查看多端设备预览效果

Inspector双向预览


DevEco Studio为开发者提供了预览器的功能,可以在OpenHarmony应用/服务的界面UI开发过程中,预览界面UI的效果,方便开发者随时调整界面UI布局。

在开发界面UI代码过程中,如果添加或删除了UI组件,您需要Ctrl+S进行保存,然后预览器就会立即刷新预览结果;如果修改了组件的属性,则预览器会实时刷新预览结果。

说明

预览器支持UI界面的预览,如果UI界面的呈现结果依赖于系统API(如Ability生命周期、地理位置等)返回的数据,DevEco Studio暂不支持对系统API的Mock,需要开发者提前准备依赖的数据。

查看应用/服务预览效果

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

说明

  • 运行预览器功能依赖于电脑显卡的OpenGL版本,OpenGL版本要求为3.2及以上。
  • web、video、camera、XComponent、RichText、Qrcode组件不支持预览。
  • 实时预览:在开发界面UI代码过程中,如果添加或删除了UI组件,您只需Ctrl+S进行保存,然后预览器就会立即刷新预览结果。如果修改了组件的属性,则预览器会实时(亚秒级)刷新预览结果,达到极速预览的效果,当前版本支持eTS组件。实时预览默认开启,如果不需要实时预览,请单击预览器右上角

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

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

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

  • 确保File > Settings > OpenHarmony SDK中,已下载Previewer资源。如果已下载Previewer,但存在新版本的情况,建议升级到最新版本。
  • File > Settings > OpenHarmony SDK中的SDK建议更新至最新版本。

以eTS为例,预览器的使用方法如下:

  1. 创建或打开一个eTS应用/服务工程。本示例以创建一个新的eTS工程为例。
  2. 在创建的工程目录下,打开任意一个.ets文件(JS工程请打开.hml/.css/.js页面)。
  3. 可以通过如下任意一种方式打开预览器开关,显示效果如下图所示:
    • 通过菜单栏,单击View>Tool Windows>Previewer打开预览器。
    • 在编辑窗口右上角的侧边工具栏,单击Previewer,打开预览器。

查看eTS组件预览效果

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

@Preview的使用参考如下示例


  1. @Preview({
  2. title: 'FoodImage'
  3. })
  4. @Component
  5. struct FoodImageDisplayPreview {
  6. build() {
  7. Flex() {
  8. FoodImageDisplay({ foodItem: getDefaultFoodData() })
  9. }
  10. }
  11. }
  12. @Component
  13. struct FoodImageDisplay {
  14. private foodItem: FoodData = getDefaultFoodData();
  15. build() {
  16. Stack({ alignContent: Alignment.BottomStart }) {
  17. Image(this.foodItem.image)
  18. .objectFit(ImageFit.Contain)
  19. Text(this.foodItem.name)
  20. .fontSize(24)
  21. .margin({ left: 26, bottom: 16 })
  22. }
  23. .height(360)
  24. .backgroundColor(this.foodItem.color)
  25. .shadow(SHADOW_STYLE)
  26. }
  27. }

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

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


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

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


  1. @Component
  2. struct Title {
  3. context: string
  4. build() {
  5. Text(this.context)
  6. }
  7. }

建议按如下方式预览:


  1. @Preview
  2. @Component //定义组件片段TitlePreview
  3. struct TitlePreview {
  4. build() {
  5. Title({ context: 'MyTitle' }) //在该片段中声明将要预览的组件Title,以及该组件依赖的入参 {context:’MyTitle’}
  6. }
  7. }

Profile Manager

在OpenHarmony应用/服务开发过程中,由于设备类型繁多,需要查看在不同设备上的界面显示效果。对此,DevEco Studio的预览器提供了Profile Manager功能,支持开发者自定义预览设备Profile(包含分辨率和语言),从而可以通过定义不同的预览设备Profile,查看OpenHarmony应用或原子化服务在不同设备上的预览显示效果。

定义设备后,可以在Previewer中,单击设备型号,切换预览设备。

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

下面以自定义一款设备为例,介绍设备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中deviceType字段已定义的设备(Stage模型选择module.json5中deviceTypes字段已定义的设备)。

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

查看多端设备预览效果

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

说明

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

前面介绍了DevEco Studio支持OpenHarmony应用/服务的预览器功能,多端设备预览器支持OpenHarmony应用/服务在不同设备上的同时预览。

下面以eTS应用为例,介绍多端设备预览器的使用方法,JS应用的多端设备预览器使用方法相同。

  1. 在工程目录中,打开任意一个.ets页面(JS请打开hml/css/js)。
  2. 可以通过如下任意一种方式打开预览器开关,显示效果如下图所示:
    • 通过菜单栏,单击View>Tool Windows>Previewer,打开预览器。
    • 在编辑窗口右上角的侧边工具栏,单击Previewer,打开预览器。
  3. 在Previewer窗口中,打开Profile Manager中的Multi-profile preview开关,同时查看多设备上的应用/服务运行效果。

    说明

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

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

Inspector双向预览

DevEco Studio提供OpenHarmony应用/服务的UI预览界面与源代码文件间的双向预览功能,支持ets文件、hml文件与预览器界面的双向预览。使用双向预览功能时,需要在预览器界面打开双向预览功能。

说明

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

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

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

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

说明

  • 如果组件有做数据绑定,则其属性不支持修改。
  • 如果界面有使用动画效果或者带动画效果组件,则其属性不支持修改。