关于harmonyos:HarmonyOS使用预览器查看应用服务效果

DevEco Studio 为开发者提供了 UI 界面预览性能，能够查看利用 / 服务的 UI 界面成果，不便开发者随时调整界面 UI 布局。预览器反对布局代码的实时预览，只须要将开发的源代码进行保留，就能够通过预览器实时查看利用 / 服务运行成果，不便开发者随时调整代码。

阐明
因为操作系统和真机设备的差别，在预览界面中可能呈现字体、色彩等与真机设备运行的成果存在差别，预览成果仅作为利用 / 服务开发过程中的参考，理论最终成果请以真机设备运行成果为准。

为了更好的应用体验，倡议先将 DevEco Studio 降级至最新版本，而后检测并更新 SDK 至最新版本。

预览器反对 JS 和 ArkTS 利用 / 服务“实时预览”和“动静预览”。

阐明
预览 Phone、Tablet、TV 和 Wearable 设施的 JS/ArkTS 工程，预览器性能依赖于电脑显卡的 OpenGL 版本，OpenGL 版本要求为 3.2 及以上。
richtext、web、video、XComponent 组件不反对预览。
不反对调用 C ++ 库的预览。
har 在被利用和元服务应用时真机成果有区别，真机上实际效果利用不显示 menubar，元服务显示 menubar，但预览器都以不显示 menubar 为准。若开发 har 模块时，请留神被元服务应用时预览器成果与真机成果的不同。

实时预览：在开发界面 UI 代码过程中，如果增加或删除了 UI 组件，您只需 Ctrl+ S 进行保留，而后预览器就会立刻刷新预览后果。如果批改了组件的属性，则预览器会实时（亚秒级）刷新预览后果，达到极速预览的成果（以后版本极速预览仅反对 ArkTS 组件。API 8 工程的极速预览仅在非数据绑定场景失效，如波及数据绑定，仍须要在文件保留后才能够预览；API 9 工程的极速预览反对局部数据绑定场景，如 @State 变量）。实时预览默认开启，如果不须要实时预览，请单击预览器右上角按钮，敞开实时预览性能。

阐明

开发者批改 resources/base/profile 目录下的配置文件（如 main_page.json），不反对触发实时预览，开发者须要手动刷新。

动静预览：在预览器界面，能够在预览器中操作利用 / 服务的界面交互动作，如单击、跳转、滑动等，与利用 / 服务运行在真机设备上的界面交互体验统一。

在应用预览器前，请依据如下项查看环境信息：

确保 File > Settings > SDK >
HarmonyOS/OpenHarmony 中，已下载 Previewer 资源。如果已下载 Previewer，但存在新版本的状况，倡议降级到最新版本，详情请参考下载 HarmonyOS
SDK。
倡议将 File > Settings > SDK > HarmonyOS/OpenHarmony 中的 SDK 更新至最新版本。

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

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

ArkUI 预览反对页面预览与组件预览，下图中左侧图标为页面预览，右侧图标为组件预览。

ArkTS 利用 / 服务反对页面预览，要求 compileSdkVersion 为 7 或以上。页面预览通过在工程的 ets 文件头部增加注解 @Entry 实现。

@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%')
  }
}

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 预览器反对 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 的自定义组件，不反对预览。
只反对中的相干 UI 组件。
只反对 jpeg/jpg、png、bmp 和 wbmp 格局的图片预览。
不反对 HarmonyOS Library 模块的预览。
不反对 Ability 间跳转的预览。
不反对通过 JNI 调用 C ++ 库的预览。

在应用 Java 预览器前，请依据如下项查看环境信息：

须要确保 File > Settings > SDK > HarmonyOS
SDK 中，已下载对应版本的 Previewer 资源，如果已下载 Previewer，但存在新版本的状况，须要降级到最新版本。
File > Settings > SDK > 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，关上预览器。

阐明
该个性在 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 反对 ArkTS、JS 和 Java 利用 / 服务的预览器性能，多端设施预览器反对 ArkTS、JS 与 Java 利用 / 服务在不同设施上的同时预览。如果两个设施反对的编码语言不同，就不能应用多端设施预览性能，例如，Java 语言的 Phone 的利用 / 服务，是不反对在 LiteWearable 上运行的，因为 LiteWearable 不反对 Java 语言。

上面以 ArkTS 利用 / 服务为例，介绍多端设施预览器的应用办法，JS 和 Java 利用 / 服务的多端设施预览器应用办法雷同。

1. 在工程目录中，关上任意一个 ets 文件（JS 请关上 hml/css/js 文件，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 界面，并更新组件树信息及组件属性。

阐明
如果组件有做数据绑定，则其属性不反对在属性面板批改。
如果界面有应用动画成果或者带动画成果组件，则其属性不反对在属性面板批改。
多设施预览时，不反对双向预览。

为了可能让大家跟上互联网时代的技术迭代，在这里跟大家分享一下我本人近期学习心得以及参考网上材料整顿出的一份最新版的鸿蒙学习晋升材料 ，有须要的小伙伴自行支付， 限时开源，先到先得~~~~

支付以下高清学习路线原图请点击→《鸿蒙全套学习指南》纯血鸿蒙 HarmonyOS 根底技能学习路线图

支付以上残缺高清学习路线图，请点击→《鸿蒙根底入门学习指南》小编本人整顿的局部学习材料（蕴含有高清视频、开发文档、电子书籍等）

以上分享的学习路线都适宜哪些人跟着学习？
- 应届生 / 计算机专业通过学习鸿蒙新兴技术，入行互联网，将来高起点待业。- 0 根底转行提前布局新方向，抓住风口，自我晋升，取得更多就业机会。- 技术晋升 / 进阶跳槽倒退瓶颈期，晋升职场竞争力，疾速把握鸿蒙技术，享受蓝海红利。

鸿蒙开发学习是一个系统化的过程，从 基础知识的学习到实战技能的锻炼 ，再到对前沿技术的摸索，每一环节都至关重要。 心愿这份教程材料能帮忙您疾速入门并在鸿蒙开发之路上步步攀升，成就一番事业。让咱们一起乘风破浪，拥抱鸿蒙生态的广大将来！

如果你感觉这篇内容对你有帮忙，我想麻烦大家动动小手给我：点赞，转发，有你们的『点赞和评论』，才是我发明的能源。

关注我，同时能够期待后续文章 ing，不定期分享原创常识。

想要获取更多残缺鸿蒙最新 VIP 学习材料，请点击→《鸿蒙 (Harmony OS)开发学习手册》

关于harmonyos:HarmonyOS使用预览器查看应用服务效果

查看 ArkTS 和 JS 利用 / 服务预览成果

查看 ArkUI 预览成果

页面预览

组件预览

查看 Java 利用 / 服务预览成果

Profile Manager

查看多端设施预览成果

最初

Just My Socks（注册教程内含优惠码）

关于harmonyos:HarmonyOS使用预览器查看应用服务效果

查看 ArkTS 和 JS 利用 / 服务预览成果

查看 ArkUI 预览成果

页面预览

组件预览

查看 Java 利用 / 服务预览成果

Profile Manager

查看多端设施预览成果

最初

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）