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

编辑页面

顶部操作栏

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

类目 说明
导航 鼠标移到该图标上,可展开项目概览框。您可以查看、更新该项目下的应用、产品、设备等。

单击查看所有项目可进入IoT Studio > 项目管理页面。

应用所属项目-应用名称 上图示例中,文档测试是当前应用所属项目名称。家居控制面板是当前应用名称。
保存时间 应用配置的保存时间。
撤销 撤销上一步操作。
恢复 恢复已被撤销的操作。
预览 应用编辑过程中或编辑完成后,您可以随时单击此按钮,预览当前已配置的应用。
保存 系统每分钟会自动保存配置,您也可以单击此按钮,手动保存当前配置。
发布 单击此按钮,将已配置完成的应用发布到云端。
工单 提交工单。
帮助 查看Web可视化开发帮助文档。

左侧导航栏

类目 说明
页面 当前应用所包含的导航布局和页面列表。

导航布局:

  • 空白
  • 顶部栏:页面左上角显示LOGO和Web应用名称。
  • 左导航:页面左侧显示LOGO和导航菜单。
  • 顶部栏左导航:页面左上角显示LOGO和Web应用名称,左侧显示导航菜单。

选择页面布局后,单击配置,开启并配置应用的页面导航菜单栏。具体操作说明请参见配置导航菜单

页面列表选择页面后,可自定义页面名称、新增或删除页面。具体说明请参见管理页面

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

画布

编辑器中间是画布区域。

在画布下方,您可以:

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

右侧配置栏

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

类目 说明
样式 配置组件在应用页面的显示效果。通用配置说明,请参见样式配置

各组件样式配置请参见组件目录下各组件文档。

配置组件的数据源。不同组件可配置的数据源不同。一个组件支持配置多个数据源。

数据源可包括:设备、接口、静态数据、数据表资源。配置说明,请参见:设备接口静态数据数据表资源

交互 配置交互动作,即根据当前组件的事件,如单击、双击、值改变、聚焦、失焦、鼠标移入、移出等,进行相应的交互动作,如单击该组件,则发起服务端请求。配置说明,请参见交互配置