DevEco Studio的这些预览能力你都知道吗？

在万物互联的今天，开发者在应用/服务开发过程中，需要考虑应用/服务在不同设备上的运行效果。为满足这一需求，DevEco Studio 作为 HarmonyOS 和 OpenAtom OpenHarmony（简称“OpenHarmony”）应用及服务开发配套的集成开发环境（IDE），提供了强大的预览功能，让开发者能够预览应用/服务在不同终端设备上的 UI 显示效果，不仅支持边开发边预览，还支持在预览过程中进行界面交互。下面，就带大家一起来了解 DevEco Studio 的预览功能。

一、多端设备预览

OpenHarmony 作为分布式操作系统，支持运行在不同的终端设备上。为方便开发者查看应用/服务在不同终端设备上的 UI 布局和交互效果，DevEco Studio 提供多端设备预览功能。DevEco Studio 的预览器支持自定义预览设备 Profile（包含分辨率和语言等），通过定义不同的预览设备 Profile，让开发者可以查看应用或服务在不同终端设备上的预览效果。

点击预览器右上角的

按钮，可以看到所有已定义的预览设备 Profile。通过点击切换不同的预览设备 Profile，可以查看不同终端设备上的预览效果。此外，打开 Multi-profile preview 开关，还可以同时查看多个终端设备上的预览效果。

二、双向预览

在应用/服务开发过程中，开发者通常需要一边开发代码，一边查看预览效果。为帮助开发者提升开发效率，DevEco Studio 提供双向预览功能，支持代码编辑器、预览器UI界面和组件树（Component tree）三者之间的联动。

● 选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。这样，通过预览器的 UI 界面即可快速地定位到相应代码，让代码修改更加便利。

● 选中布局文件中的代码块，则在 UI 界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。这样，通过选中代码块就能精准地查看对应的界面组件的预览效果，让预览更加精准、高效。

● 选中组件树中的组件，则对应的代码块和 UI 界面也会高亮显示。此外，如果修改了组件树中某一组件的属性，代码编辑器中对应的代码也会同步修改。

三、实时预览

为了让开发者可以在应用/服务开发时快速查看预览效果，DevEco Studio 提供实时预览功能。开发者添加或删除 UI 组件、并且使用快捷键 Ctrl+S 进行保存后，预览器会立即刷新预览结果。如果只是简单地修改了某个组件的属性，且在这个组件没有绑定变量的情况下，预览器会亚秒级同步刷新预览结果，且不会丢失页面当前状态，达到极速预览的效果。（当前，暂时只有 eTS 组件支持此极速预览功能。）

四、动态预览

动态交互也是应用/服务开发过程中非常重要的一个环节。为此，DevEco Studio 提供动态预览功能，支持开发者在预览器的 UI 界面中进行交互操作，比如点击、跳转、滑动交互等，操作体验与在真机设备上的交互体验一致。

至此，DevEco Studio 的预览功能就介绍完了。需要注意的是，在使用 DevEco Studio 的预览器前，需确保 Settings > OpenHarmony SDK > Tools 中已安装 Previewer 资源，同时建议 Settings > OpenHarmony SDK > Platforms 中的 JS SDK 更新到最新版本。

为了帮助到大家能够更有效的学习OpenHarmony 开发的内容，下面特别准备了一些相关的参考学习资料：

OpenHarmony 开发环境搭建：https://qr18.cn/CgxrRy

《OpenHarmony源码解析》：https://qr18.cn/CgxrRy

• 搭建开发环境
• Windows 开发环境的搭建
• Ubuntu 开发环境搭建
• Linux 与 Windows 之间的文件共享
• ……
  

系统架构分析：https://qr18.cn/CgxrRy

• 构建子系统
• 启动流程
• 子系统
• 分布式任务调度子系统
• 分布式通信子系统
• 驱动子系统
• ……

OpenHarmony 设备开发学习手册：https://qr18.cn/CgxrRy

OpenHarmony面试题（内含参考答案）：https://qr18.cn/CgxrRy