初识高级页面开发界面

进入经典版应用设计器，将鼠标放在某个文件夹上，单击“+”，选择“高级页面”，即可新建一个空白高级页面或基于模板创建一个高级页面。页面创建后，自动进入高级页面开发界面，您可以阅读以下内容初步了解高级页面。

图1 高级页面开发界面

高级页面开发工作台，功能模块布局说明如下：

• 高级页面工具栏（序号1）
  展示页面开发过程中的常用工具，如获取、释放锁，电脑端或者移动端页面设置等。

  • 组件列表：用于展开、收起高级组件列表。
  • 获取锁\释放锁：低代码平台提供了多人协同开发保护机制，即页面锁机制。在应用开发过程中除了新建页面，其它页面相关操作都必须先锁定页面，包括编辑页面、删除页面、下载页面、发布页面模板、复制页面、保存发布页面。同时，在进行页面设置前，必须先锁定页面设置。

    多人协同操作页面，锁定规则如下：

    • 锁定高级页面的前提：该页面未被他人锁定，且页面设置未被他人锁定。
    • 锁定页面设置的前提：所有页面包括页面设置，未被他人锁定。
    • 每个用户只允许锁定一个页面或页面设置。
  • 电脑端\移动端：为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。多终端适配的详细介绍，请参见如何适配多终端。
  • 保存：保存当前开发页面的修改。
  • 发布：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。

    页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。

  • 预览：页面发布后，可以预览该页面运行态效果。
  • 撤销\复原：页面开发过程中若出现误操作，可执行撤销、复原操作。
  • 性能分析：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。
  • 高级页面缩放比例：用于调节页面画布在开发工作台中的大小比例。
  • 自动适应大小：自动适应页面画布在开发工作台中的大小比例。
  • 网格线：开启画布网格线功能，用于标定组件在画布中的位置。
  • 页面视图设置：设置高级页面的分辨率、网格大小、背景颜色和背景图片。
  • 页面状态设置：设置页面的状态。
• 组件分类列表（序号2）

  包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。

• 高级组件展示、选择区域（序号2、3）
  选定组件分类后，属于该功能分类的组件将显示在该区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。

  • 搜索框：通过组件名称，可快速查询归属于当前选定组件分类中的高级组件。
    图2 搜索框
    
  • 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。
    图3 应用场景筛选
    
  • 预置和自定义筛选：用于筛选当前选定组件分类中，包括预置组件和用户自定义组件。

    预置组件是低代码平台提供的全局高级组件，详情请参见全局高级组件。自定义组件为用户自主开发的高级组件，详情请参见开发高级组件。

• 画布
  编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。此处以绝对布局方式的高级页面为例，流式布局相关操作方法请参见流式布局高级页面。

  • 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。
    图4 拖拽组件示例
    
  • 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。
    图5 画布中调整组件示例
    

    如上图中所示，在执行操作前请确保已获取当前页面的页面锁，未获取页面锁的状态下执行的所有操作都不能保存。当页面处于锁定状态下时，当前应用中其他页面均无法获取页面锁，若需要进行页面开发，请先释放页面锁。

  • 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（若已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。
    • 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。
    • 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。
    • 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。
    • 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。
      图6 格式刷操作示例
      
    • 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即 CSS 中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。
    • 高级设置：用于设置当前组件的样式属性，全局高级组件详细介绍，请参见全局高级组件。
• 组件属性设置区域

  未选中画布中任何组件时，此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的“组件属性设置”栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。

  图7 组件属性设置操作示例
  
  • 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见开发高级组件。

    表1 组件属性设置说明

    类别	设置项	详细说明
    基础	组件标题	设置该组件在“当前视图组件列表”中的组件标题。
    	组件名称	设置该组件在运行态时，DOM结构中widgetname属性。
    位置（仅在绝对布局类型的高级页面中存在此设置）	距离左端	设置组件在画布中，距离画布左边的距离，单位为px。
    	距离顶端	设置组件在画布中，距离画布顶端的距离，单位为px。
    	宽度	设置组件宽度，单位为px。
    	高度	设置组件高度，单位为px。
    	堆叠顺序	设置组件堆叠顺序，即 CS S中的z-index属性，单位为px。当存在多个组件堆叠的情况时，可通过该设置项设置堆叠顺序，设置值较大的显示在上方。
    边框	全边框	设置组件全边框，包含边框样式、宽度、颜色和弧度。
    	角边框	设置组件角边框，包含边框宽度、长度、颜色、弧度和边距。
    背景	样式	设置组件背景图片的展示模式，包含普通、居中、拉伸和平铺。
    	图片链接	设置背景图片。
    	颜色	设置组件背景颜色。

  • 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见如何调用后台接口。
  • 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见如何实现组件交互。
  • 路由设置：当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。