概述

组件的描述文件描述了一个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": "当前值"
    }]
  }]
}

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

属性

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

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

服务

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

事件

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