config文件详解

{
"develop":{
"html":"index.html",
"css":["./index.css"],
"entry":"./main.js",
"scripts":{
"sub":"./scripts/sub.js"
}
},
"plugins":["jquery"],
"libs":[],
"services":["messageService"],
"customAttributes":{
"pro":[
{
"type":"BgSize",
"name":"尺寸",
"callback":"outSizeCallBack"
}
],
"con":[
{
"type":"BiDatasourceConfigComponent",
"customInput":{
"dimensionCount":1
}
}
]
}
}

config.json是项目的配置文件

下面对config.json中的每个属性节点进行说明：

develop

配置开发文件路径

html

配置的是html入口文件。全局只允许一个html文件，必须命名为index.html，并且必须在根目录

css

可以配置多个css文件，可以按照css的优先级进行配置，云视界会按照数组中的顺序进行加载。如果多个文件中的样式有冲突，后面的样式会覆盖前面的样式。

entry

主js文件入口，必须命名为main.js，如果除了main.js还有多个js文件，可以全部放入到scripts目录中。对目录命名没有要求。

scripts

其他js文件的配置入口，注意这个类型是对象。

开发者需要js文件名作为key值，例如sub.js，那么这里的key就是sub。在main.js中如果想要调用这个sub中的方法，可以从外层函数的入参中获取。

plugins

配置需要云视界提供的插件。 plugins 是数组类型，目前支持5种插件

名称描述版本使用方法
jquery引用方法：window.plugins.jquery3.2.1查看
Highcharts引用方法：window.plugins.Highchartsv7.2.0查看
echarts引用方法：window.plugins.echarts查看
threejsthree.js 开发三维场景需要的第三方库。引用方法：window.plugins.THREE查看
loadash引用方法：window.plugins.loadash查看

这5种插件，云视界内部已经内置，涉及到这5个插件的，不允许单独配置外部依赖库。（为防止和内置依赖这几个插件的组件不兼容)

libs

配置的是第三方插件的地址，支持配置多个。

  • 可以配置第三方插件的地址，需要注意的是这里不可以将第三方插件下载到本地，libs中的地址要求是绝对地址。
  • 如果某些第三方插件不仅仅是js文件，还有css文件，那么同样也在这里配置。云视界会根据扩展名自动加载。
  • 如果第三方插件的远程地址不携带扩展名，可能会导致插件加载失败和报错。

例如：

{
"develop":{
"html":"index.html",
"css":["./index.css"],
"entry":"./main.js",
"scripts":{
}
},
"plugins":[],
"libs":[
"https://cdn.bootcdn.net/ajax/libs/circliful/2.0.2/circliful.min.js",
"https://cdn.bootcdn.net/ajax/libs/circliful/2.0.2/main.css"
],
"services":["messageService"],
"customAttributes":{
"pro":[
]
}
}

上例中，通过在libs中配置了第三方插件circliful的cdn地址，来引用这个插件。同时需要注意到，这里也可以配置插件依赖的css。

services

配置的是云视界内部的service。第三方组件在开发过程中有可能会用 每个service中封装了公共方法，一些常用的方法，会在文档中进行相关介绍。

名称描述详情
messageService提供全局消息服务 引用方法：window.services.messageService查看
modalService提供全局弹框提示服务 引用方法：window.services.modalService查看
$eventDispatch提供云视界内部的订阅事件服务 引用方法:window.services.$eventDispatch查看
$instance提供组件实例 引用方法:window.services.$instance查看
$customService封装一些数据源相关的函数 引用方法:window.services.$customService查看

customAttributes

这个配置的是第三方组件的属性栏，customAttributes中必须包含2个属性pro和con

  • pro

    本身是个数组，数组中可以包含若干对象，每个对象对应一个样式组件，每个组件中包含几个属性:

    • type

      定义了属性的类型，例如："BgSize"，这是个尺寸样式组件，配置了这个组件，可以在右侧属性栏显示自定义组件的尺寸，并可以设置组件的宽高。

    • name

      这个是样式组件的显示名称，还拿"BgSize"样式组件为例，假如设置name值为"组件尺寸"，那么右侧属性栏展示的就是这个名称。

    • callback

      这个是当值发生改变时候的回调函数。示例中callback的值是"bgSizeCallBack"

      bgSizeCallBack是个函数，开发者需要在自己的匿名函数中暴露出来。

      (function(options=null){
      /*js代码放在该匿名函数中*/
      return {
      ...,
      bgSizeCallBack:function(){
      //回调函数在这里
      }
      }
      })

      当样式组件发生改变的时候，开发者可以通过callback设置的函数得到回调。一般情况下都会有返回值，样式组件配置文档中会有每个样式组件的详细说明。

    其他的属性各个组件各不相同，请参考属性栏配置

Edit this page