更新时间:2024-09-18 GMT+08:00
分享

通过宏实现AstroZero高级页面间组件的交互

操作场景

页面间组件的交互,除了需要事件-动作机制,还需要用到低代码中的页面宏。本章节通过具体示例,为您介绍页面间组件交互的方法。如图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的介绍,请参见通过事件动作实现AstroZero高级页面内组件的交互

页面间组件的交互

  1. 将模板组件widgetEventTemplate(如果widgetEventTemplate已上传,请不要重复上传)、widgetPageMacroTemplate上传至组件库,操作方法请参见在线开发AstroZero高级页面自定义组件“上传自定义组件”
  2. 新建两个高级页面,分别命名为Page1和Page2。
  3. 配置页面Page1。

    1. 在Page1页面左上方,单击,在“自定义”选中widgetEventTemplate组件,并将其拖入画布。
    2. 选中画布中的组件“widgetEventTemplate”,在右侧组件属性设置面板的“事件”页签下单击“sendEvent”后的齿轮图标,打开sendEvent的事件编辑弹窗。
    3. 选择“新建动作 > 默认 > 页面跳转”,配置“事件编辑”页面上参数,设置跳转页面,新增参数“pageMacro”为“${e.param1}”,单击“确定”。

      “事件编辑”中页面跳转主要参数说明如下。

      • 页面类型:分内部页面和外部页面,此场景中“Page2”为内部页面,请勾选“内部页面”。
      • 内部页面:配置动作跳转至页面“Page2”。
      • 动作参数:单击“新建”,配置“pageMacro = ${e.param1}”,表示通过“${e.param1}”将“sendEvent”事件参数取值赋给Page2的页面宏“pageMacro”,实现数值的传递。
      • 页面打开方式:打开跳转页面的方式,分“当前窗口”或者“新窗口”。
    4. 在“事件编辑”中单击“确定”,并依次保存、发布高级页面Page1。

  4. 配置页面Page2。

    1. 在Page2页面左上方,单击,从“自定义”组件中选中“widgetPageMacroTemplate”组件,并将其拖入画布。
      图3 拖拽widgetPageMacroTemplate组件到画布中
    2. 新建页面宏。

      单击左侧目录树中Page2页面后的“...”图标,选择“设置”。在“页面宏”页签,单击“新建”。

    3. 配置页面宏

      在“新建页面宏”弹窗中,配置页面宏参数,完成后单击“确认”。

      • ID:页面宏的唯一标识,应与“widgetPageMacroTemplate.editor.js”中定义的页面宏变量名保持一致(本例中即 ${pm.pageMacro} 中的pageMacro)。
      • 名称:页面宏名称,可随意配置。
      • 默认值:宏的默认取值。
        图4 新建页面宏
    4. 返回“页面宏”页签,确认无误后单击“保存”。
      图5 页面设置

      低代码平台支持在组件的“事件”页签自定义动作时,获取页面宏。

      1. 选中组件,在右侧“事件”页签下,单击“点击”事件后的
      2. 单击“新建动作”,选择“自定义 > 自定义动作”。
      3. 在“事件编辑”中,通过代码“console.log(`${pm.pageMacro}`)”获取页面宏。

        其中,“pageMacro”请替换为实际的页面宏“ID”,注意代码中必须要加“`”。

        图6 在“事件编辑”自定义代码中获取页面宏
    5. 此时画布中的widgetPageMacroTemplate组件,已显示页面宏的默认值,依次保存、发布Page2页面。
      图7 保存并发布Page2

  5. 单击Page1页面上方的,预览效果。

相关文档