目录

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

问题现象

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

背景知识

ASCF（Atomic Service Cross Framework）是元服务为小程序生态定制的一套解决方案，能够使用类似于小程序的开发技术，高效开发元服务。

postCardAction用于卡片内部和提供方应用间的交互，当前支持router、message和call三种类型的事件，仅在卡片中可以调用。

解决方案

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

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