# 通过宏实现高级页面间组件的交互
#### 操作场景
页面间组件的交互，除了需要**事件-动作** 机制，还需要用到低代码中的**页面宏** 。本章节通过具体示例，为您介绍页面间组件交互的方法。如[图1]所示，高级页面Page1中包含示例组件widgetEventTemplate，高级页面Page2中包含示例组件widgetPageMacroTemplate，单击Page1页面中的OK按钮，输入框中的数据会通过页面宏传递给Page2。
图1页面间组件交互场景示例   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002177935129.png)
页面间的组件交互原理如下图所示，在配置事件时，选择"默认"类别中的页面跳转，并通过新增动作参数将事件的参数传给页面宏，在跳转的目标页面中读取页面宏数据。
图2Page传值原理   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002029127089.png "点击放大")
主要实现原理如下：
- **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的介绍，请参见[通过事件动作实现高级页面内组件的交互](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9115.html)。
 
#### 页面间组件的交互
1. 将模板组件widgetEventTemplate（如果widgetEventTemplate已上传，请不要重复上传）、widgetPageMacroTemplate上传至组件库，操作方法请参见[在线开发华为云Astro轻应用高级页面自定义组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9110.html)中"上传自定义组件"。
2. 新建两个高级页面，分别命名为Page1和Page2。
3. 配置页面Page1。 
   1. 在Page1页面左上方，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936098285.png)，在"自定义"选中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页面左上方，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936098329.png)，从"自定义"组件中选中"widgetPageMacroTemplate"组件，并将其拖入画布。
      图3拖拽widgetPageMacroTemplate组件到画布中   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894298652.png "点击放大") 
   
   2. 新建页面宏。 单击左侧目录树中Page2页面后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002098681234.png)图标，选择"设置"。在"页面宏"页签，单击"新建"。
      
   
   3. 配置页面宏**。**
      在"新建页面宏"弹窗中，配置页面宏参数，完成后单击"确认"。
      - **ID** ：页面宏的**唯一标识** ，应与"widgetPageMacroTemplate.editor.js"中定义的页面宏变量名保持一致（本例中即 ${pm.pageMacro} 中的**pageMacro**）。
      
      - 名称：页面宏名称，可随意配置。
      
      - 默认值：宏的默认取值。
        图4新建页面宏   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002134206465.png) 
       
   
   4. 返回"页面宏"页签，确认无误后单击"保存"。
      图5页面设置   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002134326505.png "点击放大")
      低代码平台支持在组件的"事件"页签自定义动作时，获取页面宏。
      1. 选中组件，在右侧"事件"页签下，单击"点击"事件后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894298640.png)。
      
      2. 单击"新建动作"，选择"自定义 \> 自定义动作"。
      
      3. 在"事件编辑"中，通过代码"console.log(**\`** ${pm.*pageMacro* }**\`** )"获取页面宏。
         其中，"*pageMacro* "请替换为实际的页面宏"ID"，注意代码中必须要加"**\`**"。
         图6在"事件编辑"自定义代码中获取页面宏   
         ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002098688706.png "点击放大") 
       
   
   5. 此时画布中的widgetPageMacroTemplate组件，已显示页面宏的默认值，依次保存、发布Page2页面。
      图7保存并发布Page2   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001948918850.png "点击放大") 
   
   
   
   
5. 单击Page1页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894298644.png)，预览效果。