# 元服务卡片如何跳转ASCF页面

## 问题现象

元服务卡片中使用postCardAction方法如何跳转到ASCF元服务指定页面？

## 背景知识

[ASCF（Atomic Service Cross Framework）](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/ascf-overview)是元服务为小程序生态定制的一套解决方案，能够使用类似于小程序的开发技术，高效开发元服务。

[postCardAction](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-postcardaction)用于卡片内部和提供方应用间的交互，当前支持router、message和call三种类型的事件，仅在卡片中可以调用。

## 解决方案

1. postCardAction中的router事件支持跳转到指定UIAbility，同时也支持携带页面路径和页面参数跳转到指定页面，在跳转到ASCF元服务页面时需要指定参数名为ascfPara，参考代码如下：

   ```ts
   @Entry
   @Component
   struct WidgetCard {
     readonly actionType: string = 'router';
     readonly abilityName: string = 'EntryAbility';

     build() {
       Column() {
         Button('跳转页面1')
           .width('80%')
           .height(50)
           .margin({ top: 20 })
           .onClick(() => {
             postCardAction(this, {
               action: this.actionType,
               abilityName: this.abilityName,
               params: {
                 ascfPara: encodeURIComponent(JSON.stringify({
                   path: 'pages/test/page1?param1=value1¶m2=value2'
                 }))
               }

             });
           });

         Button('跳转页面2')
           .width('80%')
           .height(50)
           .margin({ top: 20 })
           .onClick(() => {
             postCardAction(this, {
               action: this.actionType,
               abilityName: this.abilityName,
               params: {
                 ascfPara: encodeURIComponent(JSON.stringify({
                   path: 'pages/test/page2?param=value'
                 }))
               }
             });
           });
       }
       .width('100%')
       .height('100%')
       .justifyContent(FlexAlign.Center);
     }
   }
   ```

2. 在对应的业务页面中处理传递的参数，页面1参考代码如下：

   ```js
   Page({
       onLoad: function (options) {
           console.info('page1 onLoad', options);
          // 获取从卡片传递过来的param1参数
           const param1 = options.param1;
          // 获取从卡片传递过来的param2参数
           const param2 = options.param2;
          // 将参数设置到data中，在页面上展示或使用
           this.setData({
               message: "页面1获取参数:param1=" + param1 + ",param2=" + param2
           });
       },
   });
   ```

   页面2参考代码如下：

   ```js
   Page({
       onLoad: function (options) {
           console.info('page2 onLoad', options);
        // 获取从卡片传递过来的param参数
           const param = options.param;
          // 将参数设置到data中，在页面上展示或使用
           this.setData({
               message: "页面2获取的卡片参数:param:" + param
           });
       },
   });
   ```