APPCUBE-页面间组件交互:使用说明

时间：2023-11-01 16:19:14

APPCUBE

使用说明

页面间组件的交互，除了需要事件-动作机制，还需要用到低代码中的页面宏。本章节通过具体示例，为您介绍页面间组件交互的方法。如图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);