页面间组件交互

使用说明

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

操作示例

1. 将模板组件widgetEventTemplate（若widgetEventTemplate已上传，请不要重复上传）、widgetPageMacroTemplate上传至组件库，操作方法请参见在线开发高级组件中“上传自定义组件”。
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页面。

      

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