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

操作步骤

  1. 在项目页,选择Web可视化开发 > 新建Web应用
  2. Web可视化开发页,鼠标光标移至选择模板下的区域,单击出现的使用该模板开发按钮。
  3. 新建Web可视化应用对话框中,填入应用名称和描述,单击完成,新建一个Web可视化应用。


    参数 描述
    应用名称 设置应用名称。支持中文汉字、英文大小写字母、数字、下划线(_)、连接号(-)、圆括号和空格;必须以中文汉字、英文字母或数字开头;长度不超过40个字符(一个中文汉字算一个字符)。
    所属项目 该应用所属的物联网开发项目。
    描述 描述该应用。长度不超过100字符(一个中文汉字算一个字符)。
  4. 编辑应用页面,设置页面背景和分辨率。


    参数 描述
    作为首页 当前页面是否作为应用首页。勾选该复选框,则表示作为首页。
    显示导航菜单 勾选复选框,在当前页面上显示应用的导航菜单。
    说明 需先配置应用导航菜单,才可使用此功能。导航菜单配置说明,请参见配置导航菜单
    背景颜色 选择颜色作为当前页面的背景。
    说明 背景颜色和背景图像,二选一进行设置。
    背景图像 上传本地图片作为当前页面的背景。
    说明 建议上传的图片分辨率是页面分辨率的2倍,以保证背景图片的清晰度。
    页面分辨率 设置当前应用的页面分辨率。支持选择提供的分辨率和自定义分辨率。
    说明 设置或调整页面分辨率后,当前应用所有新建页面都遵循该分辨率。

    自定义H5分辨率参考:

    • iPhone8尺寸 :667*375
    • iPhone 8 Plus尺寸:736*414
    • iPhone XS尺寸:812*375
    • iPhone XR 和iPhone XS Max尺寸:896*414
    • Android尺寸:640*360
  5. 设置页面标题。

    从左侧组件中,拖拽一个文字组件到画布上。然后,在右侧配置栏中,设置文字显示位置、文字样式、和文字内容。

    参数 描述
    显示位置 调整以下数值,设置组件在页面的显示位置。
    • X和Y:您可以设置X轴和Y轴的值,调整坐标位置。目前支持的调整步长为4px。
    • 角度:按顺时针方向旋转组件的角度。
    • W和H:表示组件尺寸宽度和高度。
    组件名称 设置组件名称,名称需在应用内具有唯一性。
    组件可见性 设置组件是否在页面上显示。
    不透明度 0%为完全透明,100%为完全不透明。
    文字内容 输入标题内容。
    文字样式 设置文字的字体、字号、颜色和粗细。
  6. 设置时钟组件。

    拖拽一个时钟组件到画布上,并设置时钟组件的展示样式。



    时钟组件特有设置说明:

    参数 描述
    展示格式 选择时钟组件展示的时间格式。可选:
    • 日期时间:显示为日期和具体时间,精确到秒。格式为:yyyy-mm-dd hh:mm:ss。
    • 时间:不显示日期,仅显示时间,精确到秒。格式为:hh:mm:ss。
    • 日期:仅显示年月日,格式为:yyyy-mm-dd。
    背景颜色 时钟组件的背景颜色。

    时钟组件默认带背景。如果想要去掉背景,可设置背景颜色不透明度为0,即将背景颜色不透明度滑块滑至最左侧。

    边框 设置时钟组件的边框显示效果。

    时钟组件默认带边框。如果想要去掉边框,将边框粗细设置为0即可。

  7. 配置控制组件。
    以下以配置一个灯的开关控制为例,介绍组件样式配置和数据源配置。
    1. 从左侧组件中,拖拽一个开关组件到画布上。


    2. 设置开关显示样式。可选:
      • 开关icon:选择为开关icon,即显示效果为组件本身样式。您需为开关的ON状态和OFF状态设置显示颜色。
      • 图片:选择为图片,即您自定义开关的显示样式。您需为开关的ON状态和OFF状态分别上传状态显示图片。本示例中,选择为图片。
    3. 设置开关组件标题。

      拖拽一个文字组件到开关组件上,再设置文字内容和样式。



    4. 配置开关的数据源。

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

      参数 描述
      选择产品 选择该开关组件对应的设备所属产品。
      选择设备 选择该开关组件对应的设备。
      • 若选择了具体设备,需单击在线模拟,进入在线调试页,推送模拟属性值,进行数据格式验证。
      • 若选择为空,需在设备模拟数据框中,输入模拟属性值,用于数据格式验证。
      设备属性 选择该开关组件对应的属性。
      设备模拟数据 当选择设备为空时出现的参数。

      需根据所选设备属性的取值范围,设置模拟值。

      属性取值范围,请在产品详情页的功能定义中查看。



  8. (可选)配置多个相同样式的开关组件
    1. 选中已配置好的开关标题和开关图片,单击鼠标右键,选择成组
    2. 复制多个相同配置的组件组到页面上。


    3. 选中复制的组件组,单击鼠标右键,选择解散组
    4. 选中标题,更改标题名称。


    5. 配置组件数据源。
  9. 单击编辑器上方保存按钮,保存设置。
  10. 单击编辑器上方预览按钮,预览应用。

后续步骤

步骤3:发布