组件的描述文件描述了一个IoT Studio组件的属性、服务和事件。本文介绍组件描述文件的结构。

通过设置组件的属性、服务和事件,可以让一个IoT Studio组件根据用户自身业务的需要,进行相关的设置,达到改变组件样式、关联设备数据源等目的。

IoT Studio组件的强大能力,是通过编写src/specs/specs.js来实现的,主要是由属性、服务、事件三个部分构成。

{
  // properties:属性,描述组件的属性列表,例如一个组件有字体、颜色等属性可以设置,放在此处。
  "properties": [
  {
    "identifier": "fontFamily",
    "text": "字体",
    "type": "enum",
    "dataTypes": [
      "String"
    ],
    "options": {
      "items": [
        {
          "label": "微软雅黑",
          "value": "\"Microsoft YaHei\""
        },
        {
          "label": "宋体",
          "value": "SimSun, STSong"
        },
        {
          "label": "黑体",
          "value": "SimHei, STHeiti"
        }   
      ]
   },
   {
     "identifier": "color",
     "text": "颜色",
     "type": "color",
     "defaultValue": {
              "r": 51,
              "g": 51,
              "b": 51
      },
  }],

  // services:服务,描述组件对外提供的服务列表,例如组件可以提供一个返回自己内部某个属性值的方法。
  "services": [{    
    "identifier": "$getValue",
    "text": "取值",
    "effect": false
  }],

  // events:事件,描述组件的动作列表,例如组件提供单击功能。单击组件后,组件可以返回某些属性值。
  "events": [{
    "identifier": "click",
    "text": "点击",
    "fields": [{
      "identifier": "status",
      "description": "当前值"
    }]
  }, {
    "identifier": "doubleClick",
    "text": "双击",
    "fields": [{
      "identifier": "status",
      "description": "当前值"
    }]
  }, {
    "identifier": "mouseEnter",
    "text": "鼠标移入",
    "fields": [{
      "identifier": "status",
      "description": "当前值"
    }]
  }]
}
说明 src/index.tsx代码中 updateValue方法下 this.$emit的第二个参数字段必须与 src/specs/specs.js代码中 events.fieldsidentifier字段保持一致。

例如上述示例events.fields.identifierstatus,则this.$emitthis.$emit('event', { status })

有关组件开发示例的更多详情,请参见本地开发测试

属性

IoT Studio为组件的属性提供了可定制的编程能力,来实现一些较为复杂的组件属性联动功能。

开发者可以为一个组件设置一些不同的属性,例如组件的文案、尺寸、位置等;可以根据业务的要求,动态地设置组件的属性,例如一个普通的下拉列表组件里面的内容;可以根据组件数据源(组件可以配置数据的来源来动态地接收数据)的返回值,展示不同的内容列表。

服务

组件可以为自己定义具体的方法,来执行命令,例如返回组件的某个属性值。定义的方法可以提供给外部使用,即该方法就是组件的服务。

事件

组件可以定义一些用户与浏览器的交互行为,由用户在界面操作时触发,触发后,可以返回一些组件内部的状态值。这种交互行为的触发就是组件的事件。