页面与组件基础操作
本文介绍三个最常用的编辑器基础操作：新建页面、添加组件、新建弹窗。如果你刚开始搭建界面，先掌握这三步即可。
编辑器完整界面说明见 认识编辑器；页面、组件、弹窗的概念关系见 UI 组织方式。
开始前：选择客户端
一个 Zion 项目可以包含多个客户端，例如网页、微信小程序、移动端 App。你在左边栏最顶部选择当前要编辑的客户端；后续新建页面、添加组件、新建弹窗，都会发生在当前选中的客户端下。
💡
不同客户端的页面和 UI 是独立的。进入具体搭建前，请先选择要编辑的客户端；如果项目还没有目标客户端，需要先在客户端入口中新建。
多端差异见 UI 组织方式。
新建、配置和预览页面
页面是当前客户端下用于承载 UI 结构、数据绑定和前端行为的独立界面单元，通常对应一个可访问的路由或视图。
- 在左边栏选择要编辑的客户端。
- 进入页面列表。
- 点击页面列表右上角的 + 按钮新建页面。
- 新页面创建后，双击名称进行重命名。
- 选中新页面，在中央画布中开始编辑内容。
页面配置
选中页面后，可以在右侧属性面板中配置页面的设计、数据和行为。详细配置项见 页面与弹窗参考。
实时预览页面
选中页面后，点击画布右上角播放图标，在新标签页打开实时预览。编辑器内的修改会实时同步在预览页面中，无需重新打包部署。
常用页面操作
| 操作 | 入口 |
|---|---|
| 重命名页面 | 双击页面名称，或右键页面后选择重命名 |
| 删除页面 | 右键页面后选择删除 |
| 复制页面 | 右键页面后选择复制 |
| 设为主页 | 右键页面后选择设为主页 |
| 新建分组 | 点击页面列表顶部的文件夹图标 |
| 添加到分组 | 右键页面后选择添加到分组 |
| 页面平铺模式 | 按⌘P / Ctrl+P 可开启页面平铺模式，快速概览所有页面 |
添加和配置组件
组件是构成界面的基本单元，可承载展示、输入、布局或交互能力，例如文本、按钮、图片、输入框、视图、列表等。
- 选中页面画布，或先选中一个容器类组件。
- 在左边栏进入「组件」标签。
- 点击蓝色 + 打开组件库。可选择“系统组件”、“自定义组件”或“代码组件”。
- 通过拖动或双击添加组件。
- 选中新添加的组件，配置它的数据绑定、交互行为、位置、尺寸、样式等。
添加组件的方式：
| 方式 | 操作 | 说明 |
|---|---|---|
| 拖动 | 从组件库拖到画布或组件树 | 可精确放到目标容器或目标层级。 |
| 双击 | 在组件库中双击组件 | 添加到当前选中的页面或容器中。 |
| 快捷键 | 使用快捷键添加常用组件 | 适合快速搭建基础结构。 |
具体快捷键见 UI 快捷键参考。
配置组件
组件的配置集中在右侧属性面板-设计中。
| 操作 | 说明 |
|---|---|
| 设计 | 配置组件的个性化配置、位置、尺寸、布局和样式等。 |
| 数据 | 配置组件的数据源、输入、输出。 |
| 行为 | 配置组件的交互行为和动画效果。 |
右侧属性面板-设计中的字段见 设计面板参考。
常用组件操作
| 操作 | 说明 |
|---|---|
| 右键菜单 | 拷贝、剪切、粘贴、创建副本、重命名、创建视图、保存为自定义组件、删除等。 |
| 组件树 | 查看组件层级、选择被遮挡或嵌套较深的组件、拖拽调整嵌套关系。 |
| 同层级顺序 | 同一父容器下，可拖拽组件树节点调整组件顺序。 |
| 搜索 | 通过页面名称、组件名称或组件 ID 定位内容。Web 端同一组件可能在多个断点下被命中。 |
| 多选 / 框选 | 按住 Shift 逐个点选，或在画布中框选多个组件。多选后，可批量修改共有属性。 |
新建和使用自定义弹窗
弹窗是独立于页面的悬浮视图，常用于确认框、表单弹层、详情弹层、抽屉等场景。弹窗不会像页面一样通过路由直接访问，需要通过按钮等组件的行为触发。
- 在左边栏选择要编辑的客户端。
- 切换到弹窗列表。
- 点击弹窗列表右上角的 + 按钮新建弹窗。
- 双击弹窗名称进行重命名。
- 选中弹窗，在弹窗画布中添加文本、按钮、输入框等组件。
- 回到页面，在按钮或其他组件的行为中配置「打开弹窗」并选择已配置的自定义弹窗。
弹窗的设计、数据和行为配置见 页面与弹窗参考。
快捷操作
快捷键见 UI 快捷键参考。
相关阅读
Last updated on