快速开发1.1+

提示：

4.0+版本仅针对私有化部署方式使用。

1. 配置 visual.json 文件

目录：/static/visual/visual.json

"customs": {
    "env": "dev",
    "source": "./static/widgets",
    "entry": {
      "config": "config.json",
      "index": "index.js",
      "thumbnail": "thumbnail.png",
      "handler": "render"
    },
    "datas": [
      {
        "group": "group1",
        "title": "测试一级分组",
        "icon": "chart-set",
        "children": [
          {
            "group": "group2",
            "title": "测试二级分组",
            "icon": "pie-chart",
            "widgets": [
              {
                "name": "test",
                "title": "测试组件",
                "version": "0.0.1"
              }
            ]
          }
        ]
      },
      {
        "group": "group3",
        "title": "测试分组",
        "icon": "pie-chart",
        "widgets": [
          {
            "name": "test2",
            "title": "测试组件2",
            "version": "0.0.1"
          }
        ]
      },
      {
        "name": "test3",
        "title": "测试组件3",
        "group": [
          "chart",
          "pie"
        ],
        "version": "0.0.1"
      }
    ]
  }

• env： 当前环境。可配置参数为dev、prod。默认配置为prod。

  • dev： 开发模式

  • prod： 产品模式

    当设置为prod时，会根据组件名称及版本号将组件定义的config.json添加到本地缓存中。建议在开发过程中设置为dev，上线环境设置为prod。

• source： 用于指定自定义组件解析文件的目录。默认配置./static/widgets。

• entry： 用于指定自定义组件解析各个文件对应的文件名。

  • config： 用于解析组件的属性配置。默认配置为config.json。

  • index： 用于解析组件主入口。默认配置为index.js。

  • thumbnail： 用于展示在设计器左侧组件列表中的图片。默认配置为thumbnail.png。

  • handler： 组件入口方法。默认配置为render。

• datas： 组件配置。用于在设计器左侧展示组件列表。

  1. 配置两级分组

  {
    "group": "group1", // 一级分组名
    "title": "测试一级分组", // 分组中文名
    "icon": "chart-set", // 分组图标
    "children": [
      // 下级分组
      {
        "group": "group2", // 二级分组名
        "title": "测试二级分组", // 分组中文名
        "icon": "pie-chart", // 分组图标
        "widgets": [
          // 组件
          {
            "name": "test", // 组件英文名， 不允许重复
            "title": "测试组件", // 组件中文名
            "version": "0.0.1" // 组件版本
          }
        ]
      }
    ]
  }
  

  2. 配置一级分组

     {
       "group": "group3", // 分组名
       "title": "测试分组", // 分组中文名
       "icon": "pie-chart", // 分组图标
       "widgets": [
         // 组件
         {
           "name": "test2", // 组件英文名， 不允许重复
           "title": "测试组件2", // 组件中文名
           "version": "0.0.1" // 组件版本
         }
       ]
     }
     

     警告：

     未设置二级分组则二级分组默认同一级分组

  3. 直接配置自定义组件

     {
       "name": "test3", // 组件英文名， 不允许重复
       "title": "测试组件3", // 组件中文名
       "group": [
         // 组件分组，可直接指定已存在的一级分组名和二级分组名
         "chart",
         "pie"
       ],
       "version": "0.0.1" // 组件版本
     }
     

     内置分组名：

     一级分组名	二级分组名
     chart	pie、bar、line
     map	map
     words	text、table、interactive
     mod	image 、border、other

2. 自定义组件 config.json 与解析

文档结构概览

test                    // 组件文件夹名
	config.json         // 属性配置文件   必要
	index.js	        // 组件解析文件
	thumbnail.png       // 组件图片       必要

警告：

组件文件夹名应与全局 config.json 文件中customs ---> data ---> widgets ---> name保持一致。