三、集成开发环境界面介绍

通过本节你将了解 iVX 在线集成开发环境 界面，快速建立对 在线集成开发环境 的认识。

---

3.1 界面区域

在线集成开发环境 界面分为以下几个区域：

• 舞台
• 组件工具栏
• 对象树/素材面板
• 素材面板
• 属性面板
• 菜单栏
• 逻辑工具栏
• 辅助工具

以下将创建一个默认设置的 WebApp 对 在线集成开发环境 界面的主要区域进行介绍。

3.2 舞台

创建一个默认设置的 WebApp 应用后，在出现的窗口中间的白色区域即为舞台：

在 舞台 中可以编辑当前应用的 UI 界面，该舞台与 Photoshop 等主流图像处理软件中的 “画布” 类似，它定义了项目的编辑区域，所有对界面的编辑和创作都在这一区域通过可视化的方式进行编辑。

3.3 组件工具栏

在 在线集成开发环境 界面中，最左侧区域为 组件栏 ：

在 组件栏 中的小图标则是组件，这些组件都有特定的功能和用法；例如需要在 舞台区 中添加图片，需要在组件栏中找到图片组件，点击后即可添加至 舞台区 中。

了解 iVX 组件的功能及使用方法是 iVX 进行开发的基础。iVX 组件丰富，包括基础网页应用、小程序应用、小游戏应用的基础元素组件以及一些的动效组等。iVX 组件并不只限于 UI 元素，还包括后台组件，可编辑的逻辑、服务、数据库等，具体的使用方式在该教程中将会详细讲解。

iVX 组件在不同类型应用下略有不同，但基础组件相同。若出现不会使用的组件，想要了解其功能，我们可以通过鼠标悬浮任意一个组件几秒，点击其出现的 “查看详情” 即可查看该组件的使用文档。

3.4 对象树/素材面板

对象树 是当前项目中包括前后台所有对象的管理窗口，以树状结构对组件进行可视化的展示，位于 在线集成开发环境 界面的最右侧：

通过对 对象树 对象进行操作，可以实现对选中对象的属性更改；例如调整对象之间的层级关系、复制、删除对象、对象重命名、搜索对象、为对象添加动画、添加数据库、添加服务等操作。具体操作将在之后教程中详细讲解。

3.5 属性面板

当我们通过 对象树 或 舞台 任意点选一个对象时，可以看到组件栏右侧将对应显示该对象的属性面板：

一般情况下对象拥有多种属性，比如表示位置信息的 X 与 Y 坐标、尺寸属性宽度与高度等；在属性栏中可以编辑这些属性改变当前对象的外观或者对应功能。

3.6 菜单面板

菜单面板位于 在线集成开发环境 界面 的顶部，主要分为左、中、右三个区域：

菜单栏 左侧主要功能为文件操作、文件保存、后端资源管理、前端资源管理：

菜单栏 中部主要功能为对项目的发布、预览以及配置：

菜单栏 右侧主要功能为项目的对其操作、等间距操作、舞台（画布）大小操作、辅助线可视设置以及舞台缩放大小设置：

3.7 逻辑工具面板

逻辑工具面板 位于 对象树 窗格右侧，用于为对象添加事件、自定义函数、动作组、服务等交互逻辑功能：

3.8 辅助工具

当我们在使用中遇到任何问题时，都可以通过查看文档、教学视频或直接求助于客服来解答疑问：

客服系统可通过右下角的帮助按钮进行访问：