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

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

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

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

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

预览器支持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预览效果