本文以开发一个家居控制(例如灯、窗帘等开关控制)面板为例,介绍Web应用开发过程。即在Web可视化编辑器中,拖拽组件到画布上,再配置组件显示样式、数据源和交互方式,以可视化开发的方式完成Web应用开发。

前提条件

步骤一:创建Web应用

操作步骤

  1. 编辑应用页面,设置页面背景图片和分辨率。
    本文以自定义分辨率375(W)*667(H)和上传背景图片为例,以下为页面配置示例图,更多配置项说明请参见管理页面编辑应用页面
  2. 设置页面标题。

    从左侧组件中,拖拽一个文字组件到画布上。在右侧配置栏中,设置文字显示位置(居中)、文字样式和文字内容。有关样式配置的详细说明请参见文字

    文字组件
  3. 设置时钟组件。

    拖拽一个时钟组件到画布上,并设置时钟组件的展示样式为日期时间。有关时钟样式配置的详细说明请参见时钟

    时钟
  4. 配置控制组件。
    以下以配置一个灯的开关控制为例,介绍组件样式配置和数据源配置。
    1. 从左侧组件中,拖拽一个矩形、一个开关和一个文字组件到画布上,矩形组件作为背景,设置组件开关样式和标题。
      • 开关icon:显示效果为组件本身样式。您需为开关的ON状态和OFF状态设置显示颜色。
      • 图片:您可以自定义开关的显示样式。您需为开关的ON状态和OFF状态分别上传状态显示图片。

      本文以显示状态图片为例,分别为ON和OFF状态上传对应图片,如下图所示。

      主卧灯
    2. 配置开关的数据源。

      在右侧配置操作栏中,单击样式 > 配置数据源,完成配置后,单击确定

      参数 说明
      选择数据源 勾选设备
      产品 选择该开关组件对应的设备所属产品。
      设备 选择该组件的数据源设备。本案例选择 指定设备
      • 指定设备:如果已有真实设备连接到物联网平台,则选择真实设备。如果真实设备未连接到物联网平台,没有上报数据,则需使用虚拟设备功能,推送模拟数据,进行数据格式验证。详细内容请参见调试虚拟设备
      • 动态设备:可选变量、组件值和URL参数三种类型的动态设备。
        • 变量:选择在当前应用中,已创建的变量作为动态设备来源。创建变量,请参见变量管理
        • 组件值:选择当前应用中,已配置的表单组件作为动态设备来源。
        • URL参数:以最终发布页面上的某个参数作为该服务的动态设备。常用于嵌入页面时,由宿主页提供动态参数,如将传入的产品型号作为服务的动态设备。
      • 空设备:若选择为空,可在设备模拟数据框中,输入模拟数据,进行数据格式验证。
      数据项 作为组件数据源的数据项。默认为设备属性。
      属性 选择该开关组件对应的属性。
  5. (可选)配置多个相同样式的开关组件。
    1. 选中已配置好的开关标题和开关图片,单击鼠标右键,选择成组
    2. 复制多个相同配置的组件组到页面上。
    3. 选中复制的组件组,单击鼠标右键,选择解散组
    4. 选中标题,更改标题名称。
    5. 根据已定义的功能属性,为组件配置对应数据源。
    配置示例
  6. 单击编辑器上方保存按钮,保存设置。
  7. 单击编辑器上方预览按钮,预览应用。

后续步骤

步骤三:发布