组件交互-华为云

华为云ASTRO轻应用-通过事件动作实现高级页面内组件的交互:操作场景

操作场景华为云Astro轻应用低代码平台为组件设计了事件-动作机制，实现组件与组件、组件与页面之间的交互。事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。本章节将向您介绍华为云Astro轻应用低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。

华为云ASTRO轻应用添加事件或宏实现高级页面组件交互

华为云Astro大屏应用-组件响应动作实现:响应动作函数

响应动作函数以数据刷新的响应动作函数为例，向您介绍组件的响应动作函数。 /*** 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义*/confirmLocationWidgetCbk: function (param) { if (param && param.eventParam && this.vm) { this.vm.getDataEntry(param.eventParam); } },// 获取当前输入框值getInputValue: function () {if (this.vm && this.vm.selectConfObj) { return this.vm.selectConfObj.selectValue; }},// 设置组件双向绑定的值setInputWidgetValue: function (value) { this.vm.selectConfObj.selectValue = value; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value; }this.advanceEditvm?.save();},// 更新组件配置setWidgetProperties: function (selectConfObj) {magno.savePropertiesForWidget({ selectConfObj: JSON.stringify(selectConfObj), });},setInput: function (value) { this.vm.selectConfObj.selectValue = value.customizeVal; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value.customizeVal; } this.advanceEditvm?.save();},

华为云Astro大屏应用组件交互

华为云Astro大屏应用-组件响应动作实现:注册动作

注册动作在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。图1 响应动作 /*** 文件global_SelectWidget.js中, 在init钩子中注册响应动作* @params thisObj: 组件实例*/Studio.registerAction(thisObj,'confirmLocationWidgetCbk','confirmLocationWidgetCbk',[],$.proxy(thisObj.confirmLocationWidgetCbk, thisObj),[], ); Studio.registerAction(thisObj, 'getInputValue', 'getInputValue', [], $.proxy(thisObj.getInputValue, thisObj), []); Studio.registerAction(thisObj,'setInputWidgetValue','setInputWidgetValue',[],$.proxy(thisObj.setInputWidgetValue, thisObj),[], ); Studio.registerAction(thisObj,'setWidgetProperties','setWidgetProperties',[],$.proxy(thisObj.setWidgetProperties, thisObj),[], ); Studio.registerAction(thisObj,'setInput','setInput',[{ name: 'customizeVal', type: 'text' }],$.proxy(thisObj.setInput, thisObj),[], );

华为云Astro大屏应用组件交互

华为云Astro轻应用-页面间组件交互:使用说明

使用说明页面间组件的交互，除了需要事件-动作机制，还需要用到低代码中的页面宏。本章节通过具体示例，为您介绍页面间组件交互的方法。如图1所示，高级页面Page1中包含示例组件widgetEventTemplate，高级页面Page2中包含示例组件widgetPageMacroTemplate，单击Page1页面中的OK按钮，输入框中的数据会通过页面宏传递给Page2。图1 页面间组件交互场景示例页面间的组件交互原理如下图所示，在配置事件时，选择“默认”类别中的页面跳转，并通过新增动作参数将事件的参数传给页面宏，在跳转的目标页面中读取页面宏数据。图2 Page传值原理主要实现原理如下： widgetPageMacroTemplate 在widgetPageMacroTemplate.editor.js文件中定义页面宏数据。 propertiesConfig: [ { config: [ { "type": "text", "name": "pageMacro", "label": "Page Macro", "value": "${pm.pageMacro}", "validation": { "rules": {} } }]}]; 表1 页面宏数据配置项说明配置项参数说明 propertiesConfig 配置组件的自定义属性。 type 配置项的数据类型，本例中配置为text（文本）。 name 配置项的变量名称，本例中设置为“pageMacro”。通过获取组件自定义配置属性的API，来获取该值。 label 配置项的展示标签。 value 配置项的默认值，本例中设置为${pm.pageMacro}。其中，pageMacro为页面宏变量名，${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。在widgetPageMacroTemplate.js文件中读取页面宏数据，并将其显示到页面中。 var widgetProperties = thisObj.getProperties();//获取该组件自定义配置属性的API。...var pageMacro = widgetProperties.pageMacro || "";$("#macro",elem).html(pageMacro); 上述示例代码中widgetProperties.pageMacro的PageMacro，即表1中name配置项设置的变量名称。 widgetEventTemplate：关于widgetEventTemplate的介绍，请参见同页面内组件的交互。

华为云Astro轻应用如何实现组件交互

云服务器内容精选

组件交互

7*24

备案

专业服务

退订

建议反馈

售前咨询热线