1# 预览器组件<a name="ZH-CN_TOPIC_0000001076213355"></a> 2 3## 简介 4 5预览器组件为DevEco Studio预览器提供了启动ArkUI渲染引擎的能力，使预览器能够通过命名管道的通信方式发送命令给预览器组件，操控ArkUI渲染引擎做到实时渲染，并将处理好的图片发送到DevEco Studio预览器中展示。预览器组件支持在Windows、MacOS上运行ArkTS及JS应用。 6 7**图 1** 预览器组件架构<a name="fig2606133765017"></a> 8 9 10DevEco Studio预览器通过命令行启动预览器组件，传递ArkTS编译产物路径及预览规格等参数数据，预览器组件启动时拉起ArkUI渲染引擎，根据启动参数渲染页面并输出图片给DevEco Studio预览器前端。DevEco Studio预览器通过命名管道发送命令给预览器组件处理页面动态变更信息，预览器组件根据不同命令调用ArkUI处理接口刷新渲染页面输出图片。 11## 目录 12 13预览器组件源代码在/ide_previewer下，目录结构如下图所示： 14 15``` 16/ide_previewer 17├── cli # 命令处理 18├── gn # 编译依赖及工具链配置 19├── jsapp # 渲染引擎调用 20├── mock # 交互层代码 21├── util # 工具类 22``` 23 24## 使用场景 25 26预览器组件随OpenHarmony SDK一起编译和发布，为DevEco Studio预览器提供调用ArkUI渲染页面的能力。 27 28## 构建编译 29 30构建编译相关介绍请见[build](https://gitee.com/openharmony/build)仓的README文档。 31 32## 相关仓 33 34**ide_previewer** 35 36[arkui\_ace\_engine\_lite](https://gitee.com/openharmony/arkui_ace_engine_lite) 37 38[arkui\_ace\_engine](https://gitee.com/openharmony/arkui_ace_engine) 39 40## 贡献 41 42详情请参考[贡献指南](https://gitee.com/openharmony/docs/blob/master/zh-cn/contribute/Readme-CN.md)。