本文简要介绍Web应用编辑器的各功能区域。



顶部操作栏

Web应用编辑器的顶部栏,从左到右依次是:

类目 说明
应用所属项目 上图示例中,WebTest0312是当前应用所属项目名称。单击该名称,可跳转至该项目概览页。您可以查看、更新该项目下的应用、产品、设备等。
应用名称 上图示例中,test0312是当前应用名称。
保存时间 应用配置的保存时间。
撤销 撤销上一步操作。
恢复 恢复已被撤销的操作。
预览 应用编辑过程中或编辑完成后,您可以随时点此按钮,预览当前已配置的应用。
保存 系统每分钟会自动保存配置,您也可以单击此按钮,手动保存当前配置。
发布 单击此按钮,将已配置完成的应用发布到云端。
工单 提交工单。
帮助 查看Web可视化开发帮助文档。

左侧导航栏

类目 说明
页面 当前应用所包含的页面。选择页面后,可自定义页面名称、新增或删除页面。具体说明,请参见管理页面

在应用的页面列表下,可勾选导航菜单,开启并配置应用的页面导航菜单栏。具体操作说明,请参见配置导航菜单

组件 选择组件,右侧会展示Web可视化开发可使用的组件列表。拖拽组件到中间画布上,便可在应用编辑中使用该组件。组件介绍和组件配置,请参见什么是组件
设备 选择设备,跳转到应用绑定设备页,为当前应用中,数据源为设备数据的组件批量绑定设备。相关操作说明,请参见批量绑定设备
设置 选择设置,跳转到应用设置页。可在此页更新应用名称和描述,开启Token鉴权,查看应用发布历史,和管理应用绑定的域名。相关操作说明,请参见应用鉴权域名管理

画布

编辑器中间是画布区域。

在画布下方,您可以:

  • 勾选标尺,画布边缘显示尺寸刻度,便于您查看当前页面的尺寸信息。
  • 勾选网格,页面会出现4px*4px的栅格点,以供您调整组件位置时参考。页面中,所有组件的位置,都将自动按照栅格位置进行吸附和对齐。
  • 点击适合画布,当前编辑界面会自适应到最佳的展示方式,尽可能完全显示页面中的内容。
  • 拖动缩放滑动条,可以放大和缩小展示当前页面。
  • 勾选自适应,应用页面会根据浏览器分辨率,自动调整显示尺寸。预览和发布后,可以查看页面自适应结果。

右侧配置栏

单击已拖拽到画布上组件,右侧将显示该组件的配置栏。

类目 说明
样式 配置组件在应用页面的显示效果。配置说明,请参见样式配置
数据 配置组件的数据源。不同组件可配置的数据源不同。数据源可包括:设备、接口、静态数据。配置说明,请参见:设备接口静态数据
交互 配置交互动作,即根据当前组件的事件,如单击、双击、值改变、聚焦、失焦、鼠标移入、移出等,进行相应的交互动作,如点击该组件,则发起服务端请求。配置说明,请参见交互配置