# 页面开发
本章节将详细介绍如何使用低代码平台开发页面，包括从创建页面到配置交互的完整操作流程。
# 1、创建页面
在左侧导航栏中点击"模块"菜单，进入页面管理界面。
点击页面管理界面右上角的"新建页面"按钮，弹出新建页面对话框。
在新建页面对话框中填写以下信息：
- 页面名称：输入页面的名称，如"用户列表"
- 页面标识：输入页面的唯一标识，如"user_list"
- 页面类型：选择页面类型（普通页面、弹窗页面等）
- 所属模块：选择页面所属的模块
填写完成后，点击"确定"按钮创建页面。
我们的物料市场中提供了丰富的页面模板，比如门户首页、统计图表页、详情页等。用户可以根据需求选择合适的模板进行快速创建。
页面创建成功后，会自动进入页面设计器界面。页面设计器主要包含以下几个区域：
- 左侧组件面板：显示可用的组件和区块
- 中间画布区域：用于拖拽组件进行页面设计
- 右侧属性面板：用于配置组件属性、样式、交互等
# 2、使用组件
# 2.1 组件使用说明
在左侧组件面板中，可以看到三个分类：
- 基础：内置的基础组件，如文本、按钮、容器、图片等
- 我的：用户自定义的组件
- 发现：来自物料市场的组件
点击分类可以展开查看该分类下的所有组件。
选中要使用的组件，比如这里需要一个按钮，找到按钮组件后，按住鼠标左键将其拖拽到中间的画布区域，松开鼠标即可完成组件的添加。
组件添加到画布后，可以通过拖拽的方式调整组件的位置，比如我要把按钮二调整到按钮一的前面，可以拖拽按钮二到按钮一的左侧。选中组件后，组件周围会出现边框，按住鼠标左键拖拽即可移动组件位置。
# 2.2 组件操作栏说明
组件操作栏提供以下操作：
- 前移：将选中的组件前移一位
- 后移：将选中的组件后移一位
- 保存到区块：将选中的组件保存到区块
- 锁定：锁定组件，锁定后无法拖拽、配置属性等
- 复制：复制当前组件
- 删除：删除当前组件
删除组件操作事例：选中要删除的组件，在弹出的操作栏中点击"删除"的图标，即可删除组件。
# 3、配置组件属性
在画布中点击要配置的组件，组件会被选中，右侧属性面板会显示该组件的属性配置项。
例如，设置按钮组件的文本属性为"确定"、类型为主要。
# 4、配置组件样式
这里使用文本组件进行展示，选中组件后，在右侧面板中点击"样式"选项卡，进入样式配置界面。
# 4.1 使用主题样式
操作步骤：
- 在样式面板的"主题样式"区域，点击样式类选择框
- 从下拉列表中选择要使用的样式类
- 可以选择多个样式类
主题样式通过配置CSS类来实现，IDE内置了多种主题样式类，可通过选择样式类来快速、统一规范的设置组件的样式。 比如设置文本字体的大小、字重、颜色，上下左右的距离等：
# 4.2 使用自定义样式
自定义样式设置区域提供了快速设置样式的界面,比如可以在文本设置界面区域中配置字体大小 、字重、颜色等。
如果样式配置界面不满足，也可以通过编写内联样式（style）来实现。
操作步骤：
- 在样式面板的"自定义样式"区域，找到样式输入框
- 直接输入CSS代码，例如：
color: #1890ff; font-size:14px;font-weight: 500;
# 5、配置页面变量
页面变量用于存储页面数据，如用户输入、请求参数、页面状态等。 用户在页面上输入的数据可以存储在页面变量中，例如：
- 搜索框输入的关键字
- 表单填写的用户信息
- 下拉框选择的选项值
变量类型说明：
string：字符串类型number：数字类型boolean：布尔值类型object：对象类型array：数组类型
在页面设计器顶部，点击"页面变量"按钮，打开变量管理对话框。
在变量管理对话框中，点击"新建变量"按钮。
在新建变量对话框中，填写以下信息：
- 变量名称：变量的唯一标识，如
showButton - 变量标题：变量的显示名称，如"是否显示按钮"
- 变量类型：选择变量类型（string、number、boolean、object、array）
- 默认值：设置变量的默认值（可选）
填写变量信息后，点击"确定"按钮完成新建变量。
如果变量类型选择为object，可以配置对象的子属性，比如存储用户信息userInfo，包含name、email等属性。
# 6、配置条件渲染
条件渲染用于根据条件显示或隐藏组件。
示例：
绑定页面变量showButton，当showButton变量的值为true时显示组件，为false时隐藏组件。
如果还没有控制变量，需要先创建页面变量。
选中要配置条件渲染的组件，在右侧属性面板中找到"是否可见"属性。"是否可见"属性默认值为true，表示组件始终可见。要实现条件渲染，需要绑定变量。
操作步骤：
点击"是否可见"属性输入框右侧的
{…}按钮
在表达式编辑器中选择或输入控制变量
点击"确定"保存
# 7、配置组件插槽
部分组件支持插槽功能，需要先开启插槽才能使用。
操作步骤：
- 选中包含插槽的组件
- 在右侧属性面板中，滑动到最底部
- 找到"插槽"配置项
- 勾选要开启的插槽
插槽开启后，会在组件中显示插槽区域，提示"拖拽组件或区块到这里"。 详细操作说明请参考插槽。
# 8、配置交互动作
选中要配置交互的组件，在右侧面板中点击"交互"选项卡。
操作步骤：
- 点击"新建交互"按钮
- 弹出交互编辑器对话框
在交互编辑器中，首先选择触发事件。不同组件支持的事件不同，例如：
- 按钮组件：
click（点击事件） - 输入框组件：
change（值改变事件）、focus（获得焦点事件） - 下拉框组件：
change（选项改变事件）
详细操作说明请参考交互动作。
# 9、配置数据源
数据源用于获取数据，如查询用户列表、查询订单列表等。
在页面设计器顶部，点击"数据源"按钮，打开数据源管理对话框。
在数据源管理对话框中，点击"新建数据源"按钮。
可以点击从服务导入按钮，从swagger中导入数据源的配置。
选择一个请求，点击"确定"，会自动根据选中的请求生成数据源配置。
数据源配置完成后，可以在组件中绑定数据源数据。
# 10、配置页面事件
组件和页面都可以配置页面事件，页面事件用于监听页面的生命周期。页面提供了以下几个事件
页面时间：
页面加载后执行：最常用，在进入页面时执行页面加载前执行：在页面加载前执行进入页面时执行：在页面进入时执行离开页面时执行：在页面离开时执行页面激活时执行：在页面激活时执行页面钝化时执行：在页面钝化时执行
# 11、预览和调试
在页面设计过程中，可以随时预览页面效果。
操作步骤：
- 点击页面设计器右上角的"预览"按钮
- 在新窗口中打开预览页面
- 测试页面功能和交互
