在移动应用编辑器中,拖拽左侧的组件到画布上,然后在页面右侧配置组件的显示样式、数据来源和要执行的动作,即以可视化方式完成应用开发。本文以创建一个空气质量监控设备面板案例介绍移动应用的开发方法。

前提条件

已完成项目创建。详细内容请参见步骤1: 创建项目
注意 物联网应用开发产品(IoT Studio)的移动应用开发功能,仅支持早期参加过产品内测功能的阿里云账号使用。否则,该功能在IoT Studio工作台上是不可见的。

操作步骤

  1. 在项目主页,展开项目开发最右侧的历史功能,并选择移动应用开发
    移动应用开发
  2. 移动应用开发页的可视化应用页签,单击新增可视化应用,然后填写信息并单击完成
    创建移动应用
    参数 描述
    应用名称 设置应用名称。支持中文汉字、英文大小写字母、数字、部分常用符号:下划线(_),连字符(-),括弧和空格;必须以中文汉字、英文字母或数字开头;长度不超过40个字符(一个中文汉字算一个字符)。
    所属项目 该应用所属的物联网开发项目。
    描述 描述该应用。长度不超过100字符(一个中文汉字算一个字符)。
    选择设备 选中移动应用模板,可在页面右侧查看详细说明。
  3. 自定义新增页,设计界面布局,即根据您的业务需要,设计您的应用页面样式,如背景、UI组件位置等。

    您可以自己设计界面样式,也可以使用左侧界面模板下的模板界面。后续步骤以自定义界面为例。

    使用界面模板:在页面左侧界面模板下选择合适的模板,拖拽到中间画布上,再根据您的需要进行调整。

    新增页面设置

    自定义界面:

    • 设置界面对齐方式和背景。样式配置
    • 设置页面布局。

      根据业务需要,从左侧UI组件的容器中,拖拽横向或(和)纵向分栏组件到画布上,然后为各分栏分别设置样式。

      说明 配置过程中,也可以随时增减分栏。
      设置页面布局
      参数 描述
      组件名称 可为该分栏组件设置名称,以区分分栏。
      可见性 设置该分栏是否显示可见。
      间距 设置该分栏与页面的四个间距。
      宽度 设置该分栏的宽度。
      高度 设置该分栏的高度。
      分栏目数 设置横向或纵向分栏目数。
  4. 配置应用页面标题。

    拖拽一个文字组件到画布上的标题分栏位置上,并在右侧配置标题内容和显示样式。

    标题
  5. 拖拽一个图片组件到画布上的对应分栏中,然后编辑图片显示样式。
    图片
  6. 创建一个温度显示组件。
    1. 拖拽一个文字组件到预留分栏中,输入文字内容温度作为标题,并配置显示样式。
    2. 再拖拽一个文字组件到预留分栏中,配置文字内容时,选择配置数据
      配置数据
    3. 配置数据源为产品下某设备的温度属性,然后单击在线模拟。页面跳转到模拟属性推送页。
      在线模拟
    4. 开启虚拟设备调试。设置一个模拟温度值,单击推送
      说明 如果您还没有为产品定义物模型,请先在产品详情页面的功能定义页定义物模型。
      虚拟调试
    5. 模拟推送成功后,回到数据源配置对话框,单击确定。该组件将显示为刚才推送的温度属性值。
      数据显示
    6. 创建一个温度单位的文字组件。配置方法与步骤a相同。
  7. 配置湿度和PM2.5显示组件。配置方法与步骤7配置温度显示组件相同。
    属性显示配置
  8. 配置一个空气监测仪开关状态监控组件。
    1. 拖拽一个文字到画布上预留的分栏上,设置内容为开关标题。
    2. 拖拽一个开关组件到画布上预留的分栏上,并设置显示样式。
      开关组件
    3. 单击配置数据或右上方的数据按钮。
    4. 配置数据源为设备的开关属性,然后单击在线模拟。页面跳转到模拟属性推送页。
    5. 设置模拟推送值,单击推送
    6. 模拟推送成功后,回到数据源配置对话框,单击确定。该开关组件将显示为刚才推送的开关状态。

      本示例操作中,模拟推送了开关的关闭状态。

      调试开关属性
  9. 单击编辑器页面右上方保存 > 预览,预览应用。

后续步骤

步骤3:配置功能模块