内置API一览表

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 数据源信息

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();
},