# 内置API一览表
表1内置API一览表 
| API                                                                      | API说明                                                                  |
|:---|:---|
| [init]                      | 组件渲染的入口函数，组件自己实现继承，使用推荐模板即可。                                           |
| [render]                       | 整个组件渲染的业务逻辑实现入口，组件自己实现继承。                                              |
| [getConnectorProperties]     | 获取Connector对接的配置值，用于查看与Connector相关的信息。                                 |
| [getConnectorInstanceByName] | 通过*{widget}.*editr.js文件中配置的Connector名称，获取Connector实例，用于向Connector请求数据。 |
| [getProperties]             | 获取该组件配置的属性值，组件接入配置数据时必须使用。                                             |
| [getContainer]              | 获取渲染该组件的容器dom节点。                                                       |
| [getWidgetBasePath]          | 获取该组件静态资源的根路径，用来拼接组件内部的其他静态资源。                                         |
| [getMessages]                | 获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用。                             |
| [hideWidget]                  | 隐藏组件。                                                                  |
| [showWidget]                  | 显示组件。                                                                  |
| [triggerEvent]               | 触发事件，需要配合registerEvent使用。                                              |
| [registerResizeEvent]        | 监听必要的dom尺寸变化事件，画布resize时会触发重新绘制。                                       |
| [callFlowConn]                 | 根据组件配置的数据类型（数据集、桥接器、数据源和静态数据），获取数据。                                    |
| [beforeDestroy]             | 组件销毁前的回调函数，组件自己实现继承。                                                   |
   
 #### init
组件初始化入口API，以SelectWidgetTemplate组件为例，初始化组件通用能力，负责注册组件事件和组件动作。主逻辑建议如下：
```
init() {
    this._super.apply(this, arguments); // 组件通用能力构建，调用父类constructor,必须要写
    this.render(); // 渲染组件
    this.registerWidgetActionAndEvent(); // 注册组件事件和动作
  },
```
 #### render
组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。主逻辑建议如下：
```
render() {
    var thisObj = this;
    var widgetProperties = thisObj.getProperties(); // 获取组件属性
    var elem = thisObj.getContainer(); // 获取组件dom，对后续操作dom的逻辑备用
    var items = thisObj.getItems();
    var connectorProperties = thisObj.getConnectorProperties(); // 获取组件Connector数据
    // 监听resize事件, 画布resize时需要重新绘制，如果有其他需要，参数可以传入函数，resize时会调用
    this.registerResizeEvent();
  },
```
 #### getConnectorProperties
获取Connector属性，无入参，使用方式参考如下：
```
const connProps = this.getConnectorProperties();
```
connProps对象中，包含组件接入的所有数据源信息。
图1数据源信息   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424645.png)
 #### getConnectorInstanceByName
通过Connector名称获取Connector实例，再通过process方法调用接口获得数据。使用方式参考如下：
```
const connectorInst = thisObj.getConnectorInstanceByName('selectDataConnector');
/**
 * @param renderCbk 成功回调
 * @param errCbk 失败回调
 */
connectorInst.process(renderCbk, errCbk)
```
其中，"connectorInst"用来调用数据源数据接口。
 #### getProperties
获取组件的配置属性，一般需要与默认属性融合后使用，无入参，使用方式参考如下：
```
var widgetProperties = thisObj.getProperties();
```
因框架限制，widgetProperties对象中每个属性的value只能是String类型。
 #### getContainer
一般用于在初始化阶段，获取组件dom，无入参，使用方式参考如下：
```
var elem = thisObj.getContainer(); 
var readerVm = new Vue({
    el:$("#select", elem)[0],
    }),
```
getContainer是页面上组件的父容器，具有唯一标识。组件内操作dom的场景必须都加上这个父容器，如上面的代码。
 #### getWidgetBasePath
获取该组件静态资源的根路径，用来拼接组件内部的其他静态资源，无入参，使用方式参考如下：
```
var widgetBasePath = thisObj.getWidgetBasePath();
```
 #### getMessages
一般用于在初始化阶段，获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用，无入参，使用方式参考如下：
```
const i18n = HttpUtils.getI18n({
    locale: HttpUtils.getLocale(),
    messages: thisObj.getMessages() 
});
```
getMessages()返回messages-en.json和messages-zh.json两个国际化文件中定义的国际化内容。
 #### hideWidget
隐藏组件，无入参，使用方式参考如下：
```
this.hideWidget()
```
 #### showWidget
展示组件，无入参，使用方式参考如下：
```
this.showWidget()
```
 #### triggerEvent
从组件内部触发事件，抛出数据。事件注册参考Studio.registerEvents，触发方式参考如下：
```
/*@param {String} eventName
* @param {obj} dataObj
*/
widgetInst.triggerEvent(eventName, dataObj);
```
 #### registerResizeEvent
监听dom尺寸变化，触发组件重新绘制。使用方式参考如下：
```
/**
   * 监听dom尺寸变化，触发组件重新绘制
   * @param resizeFunc 页面resize时，需要触发的回调函数，可选
   */
  this.registerResizeEvent(
    () => this.readerVm?.echartInst?.resize(), // 会在页面resize时，触发echartInst的resize
  );
```
 #### callFlowConn
监听必要的dom尺寸变化事件，使用方式参考如下：
```
/**
   * 根据组件配置的数据类型（数据集、桥接器、数据源、静态数据）获取数据， 未配置默认调用getMockData
   * @param {*} connector Connector实例
   * @param {*} param 参数, 没有特殊需求可以直接传入 {} ，如果传入 { test: 1 }, 发起请求时请求体会带上 test 的值
   * @param {*} callbackFunc  将数据传入回调函数
   */
  this.callFlowConn(this.connectorIns, param, this.dealRespData.bind(this));
```
 #### beforeDestroy
组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁，无入参。使用方式参考如下：
```
beforeDestroy() {
    $(window).off("resize");
    this.vm && this.vm.$destroy && this.vm.$destroy();
},
```