更新时间:2024-11-04 GMT+08:00
分享

Studio对象预置API一览表

表1 Studio对象预置API一览表

API

API说明

registerWidget

定义组件。

registerConnector

定义桥接器。

registerEvents

注册事件,只有通过此API注册后的事件才会在组件的事件列表中展现。

registerAction

用来注册动作,只有通过此API注册后的事件才会在组件的动作列表中展现。

inReader

判断当前页面状态是开发态或预览态。

registerWidget

必须在{widget}.editor.js中注册组件,使用方式参考如下:

/* @param {string} widgetName
 * @param {string} description
 */
Studio.registerWidget("widgetVueTemplate", "The widget template showing how to use the Vue library", params);

registerConnector

必须在connector.js中注册connector,使用方式参考如下:

/* @param {string} connectorID
 * @param {string} connectorName
 * @param {string} description
 * @param {obj} connector
 * @param {obj} model
 */
Studio.registerConnector("BridgeBasicTemplate", "BridgeBasicTemplate", "The bridge template showing how to use a bridge", BridgeBasicTemplate, BridgeBasicTemplateModel);

用户在接入桥接器时,如果预置的桥接器无法满足要求,可自定义桥接器。关于connector/model等参数对象的规则介绍,请参考自定义桥接器

registerEvents

一般用于在组件初始化阶段注册事件,只有通过此API注册后的事件才会在组件的事件列表中展现。同样只有注册的事件之后才能通过triggerEvent触发,使用方式参考如下:

/* @param {obj} widgetInst 组件对象自身
 * @param {string} eventName 事件名
 * @param {string/{langKey:string}} eventDescription 事件描述
 */
Studio.registerEvents(this, "selectItem", {
  zh_CN: "选中选项",
  en_US: "Choose Select item",
});

其中,“事件描述”(第三个参数)可以设置为String或者多语言对象。

registerAction

一般用于在初始化阶段注册动作,只有通过此API注册后的事件才会在组件的动作列表中展现。使用方式参考如下:

/* @param {obj} widgetInst widget实例
 * @param {string} actionName 动作名称
 * @param {string/{langKey:string}} actionDescription 动作描述
 * @param {array} params 事件触发时传入的参数数组对象
 * @param {*} receiveActionCbk 动作的回调函数,在回调函数中定义该动作的执行逻辑
 */
Studio.registerAction(
  this,
  "setSelectedItem",
  { zh_CN: "设置选中选项", en_US: "Set Selected item" },
  [{ name: "itemVal"}], 
  this.setSelectVal.bind(this)
);

setSelectVal的实现如下:

/**
 * 响应外界组件组件交互,设置下拉框选中值
 * @param {*} event
 */
setSelectVal(event) {
  this.readerVm.$set(this.readerVm.selectConf, "selectValue", event.itemVal);
},

配置动作时,可以在AstroCanvas画布交付界面,配置itemVal的值为“${e.xxx}”将事件抛出的“xxx”参数复制到itemVal中。然后select组件内统一从itemVal获取数据。select组件的内部处理API如上面代码。

inReader

判断当前页面状态是开发态或预览态,使用方式参考如下:

if (!Studio.inReader) { // “true”表示在预览态(即运行态),“false”表示在开发态。
   //todo
} 

组件内部跟编辑态相关的逻辑,比如editVm等需要判断在非运行态才需要执行。

相关文档