云服务器内容精选

  • getMessages 一般用于在初始化阶段,获取该组件国际化配置文件中定义的国际化文件内容,推荐配置vue和vueI18n使用,无入参,使用方式参考如下: const i18n = HttpUtils.getI18n({ locale: HttpUtils.getLocale(), messages: thisObj.getMessages() }); getMessages()返回messages-en.json和messages-zh.json两个国际化文件中定义的国际化内容。
  • callFlowConn 监听必要的dom尺寸变化事件,使用方式参考如下: /** * 根据组件配置的数据类型(数据集、桥接器、数据源、静态数据)获取数据, 未配置默认调用getMockData * @param {*} connector Connector实例 * @param {*} param 参数, 没有特殊需求可以直接传入 {} ,如果传入 { test: 1 }, 发起请求时请求体会带上 test 的值 * @param {*} callbackFunc 将数据传入回调函数 */ this.callFlowConn(this.connectorIns, param, this.dealRespData.bind(this));
  • 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(); },
  • getContainer 一般用于在初始化阶段,获取组件dom,无入参,使用方式参考如下: var elem = thisObj.getContainer(); var readerVm = new Vue({ el:$("#select", elem)[0], }), getContainer是页面上组件的父容器,具有唯一标识。组件内操作dom的场景必须都加上这个父容器,如上面的代码。
  • getConnectorInstanceByName 通过Connector名称获取Connector实例,再通过process方法调用接口获得数据。使用方式参考如下: const connectorInst = thisObj.getConnectorInstanceByName('selectDataConnector'); /** * @param renderCbk 成功回调 * @param errCbk 失败回调 */ connectorInst.process(renderCbk, errCbk) 其中,“connectorInst”用来调用数据源数据接口。
  • savePropertiesForWidget() 该API用于在开发态中,保存当前组件的高级设置属性信息。 /* * @param {*} props {} */ magno.savePropertiesForWidget({ // 属性应该与editor.js中的属性对应 barChartProps: JSON.stringify(_this.barPropList), barCommProps: JSON.stringify(_this.barCommProps) }); 属性值需要是String,如果为对象形式则需要做String转换。
  • getSafeUrl() 对外部链接进行xss安全过滤 ,获取安全的绝对URL地址,使用方式参考如下: /* * @param {*} url */ SafeUtils.getSafeUrl(url); SafeUtils.getSafeUrl('/test.html') //return:https://appcube.cn-north-4.huaweicloud.com/test.html SafeUtils.getSafeUrl('javascript:alert(123)') //return:'unsafe:' 只有安全的链接才会被访问,其他形式的URL都会响应一个“unsafe:”,无法访问。
  • 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如上面代码。
  • registerWidget 必须在{widget}.editor.js中注册组件,使用方式参考如下: /* @param {string} widgetName * @param {string} description */ Studio.registerWidget("widgetVueTemplate", "The widget template showing how to use the Vue library", params);