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. 

  2. title: 'FoodImage'
    3. 

  3. })
    4. 

  4. @Component
    5. 

  5. struct FoodImageDisplayPreview {
    6. 

  6. build() {
    7. 

  7. Flex() {
    8. 

  8. FoodImageDisplay({ foodItem: getDefaultFoodData() })
    9. 

  9. }
    10. 

  10. }
    11. 

  11. }
    12. 

  12. @Component
    13. 

  13. struct FoodImageDisplay {
    14. 

  14. private foodItem: FoodData = getDefaultFoodData();
    15. 

  15. build() {
    16. 

  16. Stack({ alignContent: Alignment.BottomStart }) {
    17. 

  17. Image(this.foodItem.image)
    18. 

  18. .objectFit(ImageFit.Contain)
    19. 

  19. Text(this.foodItem.name)
    20. 

  20. .fontSize(24)
    21. 

  21. .margin({ left: 26, bottom: 16 })
    22. 

  22. }
    23. 

  23. .height(360)
    24. 

  24. .backgroundColor(this.foodItem.color)
    25. 

  25. .shadow(SHADOW_STYLE)
    26. 

  26. }
    27. 

  27. }
    28. 



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




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




    

  1. @Preview({
    2. 

  2. title：'Component1' //预览组件的名称
    3. 

  3. deviceType: 'phone', //指定当前组件预览渲染的设备类型，默认为Phone
    4. 

  4. width: 1080, //预览设备的宽度，单位：px
    5. 

  5. height: 2340, //预览设备的长度，单位：px
    6. 

  6. colorMode: 'light', //显示的亮/暗模式，取值为light或dark
    7. 

  7. dpi: 480, //预览设备的屏幕DPI值
    8. 

  8. locale: 'zh_CN', //预览设备的语言，如zh_CN、en_US等
    9. 

  9. orientation: 'portrait', //预览设备的横竖屏状态，取值为portrait或landscape
    10. 

  10. roundScreen: false //设备的屏幕形状是否为圆形
    11. 

  11. })
    12. 



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




    

  1. @Component
    2. 

  2. struct Title {
    3. 

  3. context: string
    4. 

  4. build() {
    5. 

  5. Text(this.context)
    6. 

  6. }
    7. 

  7. }
    8. 



建议按如下方式预览：




    

  1. @Preview
    2. 

  2. @Component //定义组件片段TitlePreview
    3. 

  3. struct TitlePreview {
    4. 

  4. build() {
    5. 

  5. Title({ context: 'MyTitle' }) //在该片段中声明将要预览的组件Title，以及该组件依赖的入参 {context:’MyTitle’}
    6. 

  6. }
    7. 

  7. }
    8. 



Profile Manager


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


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




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


 
 


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


    

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

    

    2. 

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

    

    3. 

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

    

    4. 

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



查看多端设备预览效果


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


说明


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


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


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


    

  1. 在工程目录中，打开任意一个.ets页面（JS请打开hml/css/js）。
    2. 

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

      

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

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

    

    3. 

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

    说明
    

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

    

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

    

    4. 



Inspector双向预览


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


说明


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




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


    

  • 选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。
    • 

  • 选中布局文件中的代码块，则在UI界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。
    • 

  • 选中组件树中的组件，则对应的代码块和UI界面也会高亮显示。
    • 





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


说明


    

  • 如果组件有做数据绑定，则其属性不支持修改。
    • 

  • 如果界面有使用动画效果或者带动画效果组件，则其属性不支持修改。
    •