HarmonyOS鸿蒙Next中Form卡片如何跳转到应用的指定页面，应用路由使用的是Navigation

HarmonyOS鸿蒙Next中Form卡片如何跳转到应用的指定页面，应用路由使用的是Navigation

我的UIAbility应用中使用的是Navigation方式，现在增加了一个卡片，想从卡片中直接进入应用中指定的页面

下面是我的route_map.json

cke_2124.png

想从卡片直接进入WLAN的页面，有什么方法来实现呢？


更多关于HarmonyOS鸿蒙Next中Form卡片如何跳转到应用的指定页面，应用路由使用的是Navigation的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

【背景知识】

  • 针对动态卡片，ArkTS卡片中提供了postCardAction接口用于卡片内部和提供方应用间的交互，当前支持router、message和call三种类型的事件，仅在卡片中可以调用。
  • 针对静态卡片，ArkTS卡片提供了FormLink用于卡片内部和提供方应用间的交互。

【解决方案】

  1. 在卡片内触发相应的事件拉起UIAbility。
  • 动态卡片中调用postCardAction向指定UIAbility发送router事件，参考如下：
@Entry
@Component
struct WidgetCard {
  build() {
    Column() {
      Button('Button')
        .onClick(() => {
          postCardAction(this, {
            action: 'router',
            abilityName: 'EntryAbility',
            params: { targetPage: 'PageB' },
          });
        })
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}
  • 静态卡片调用FormLink向指定UIAbility发送router事件，参考如下：
@Entry
@Component
struct WidgetCard {
  build() {
    Column() {
      FormLink({
        action: 'router',
        abilityName: 'EntryAbility',
        params: {
          targetPage: 'PageB'
        }
      }) {
        Button('Button')
      }
    }
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
}
  1. 在UIAbility中接收router事件并获取参数，根据传递的params不同，选择拉起不同的页面，参考如下：
// EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  private selectPage: string = '';
  private currentWindowStage: window.WindowStage | null = null;

  // 获取router事件中传递的targetPage参数
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    if (want.parameters !== undefined) {
      let params: Record<string, string> = JSON.parse(JSON.stringify(want.parameters));
      this.selectPage = params.targetPage;
    }
  }

  // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    if (want.parameters?.params !== undefined) {
      let params: Record<string, string> = JSON.parse(JSON.stringify(want.parameters));
      this.selectPage = JSON.parse(params.params).message;
    }
    if (this.currentWindowStage !== null) {
      this.onWindowStageCreate(this.currentWindowStage);
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    let targetPage: string='pages/Index';
    if(this.selectPage=='PageB'){
      targetPage='pages/PageB'
    }
    if (this.currentWindowStage === null) {
      this.currentWindowStage = windowStage;
    }
    windowStage.loadContent(targetPage, (err) => {
      if (err.code) {
        return;
      }
    });
  }
}

【常见FAQ】

Q：是否可以通过卡片直接拉起系统时钟应用？

A：不可以，卡片限制仅支持拉起对应卡片应用的页面，无法直接拉起系统时钟应用；点击进入应用后如果再做二次跳转到其他应用。

更多关于HarmonyOS鸿蒙Next中Form卡片如何跳转到应用的指定页面，应用路由使用的是Navigation的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


卡片中使用postCardAction接口的router能力，能够快速拉起动态卡片提供方应用的指定UIAbility(页面)，因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮，实现一键直达的效果 ，文档如下：postCardAction-UI界面-ArkTS API-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

拉起应用以后，应用启动页面会跟你正常启动一样，这时候，你需要加标记，标记为是通过卡片打开的应用，然后在你app的各个入口中进行判断，跳转到相应的目的页面中。

在HarmonyOS Next中，Form卡片跳转到应用的指定页面可通过startAbility方法实现。使用Navigation路由时，需在Form卡片中配置abilityName和parameters参数。parameters中需包含Navigation的目标路由path。示例代码：

postCardAction({
  action: {
    abilityName: 'EntryAbility',
    parameters: {
      path: '/targetPage' // Navigation路由path
    }
  }
})

确保EntryAbility的onCreate方法中处理了parameters参数，并调用Navigation的navigateTo方法跳转。目标页面需在路由表中注册。

在HarmonyOS Next中，要从Form卡片跳转到应用的指定页面（使用Navigation路由），可以通过以下方式实现：

  1. 首先确保在route_map.json中已正确定义WLAN页面的路由路径，如您截图所示已包含"/wlan"路由。

  2. 在卡片代码中设置点击事件，通过postCardAction方法触发页面跳转：

import formProvider from '@ohos.app.form.formProvider';

// 在卡片点击事件中
onClick() {
  let params = {
    "router": "/wlan"  // 对应route_map.json中定义的路由路径
  };
  
  formProvider.postCardAction(this.context, {
    "action": "router",
    "params": params
  });
}
  1. 在UIAbility的onCreate中处理卡片跳转请求：
onCreate(want: Want) {
  if (want.parameters?.params?.router === '/wlan') {
    // 跳转到WLAN页面
    router.pushUrl({
      url: 'pages/WLAN'
    });
  }
}

注意：

  • 确保卡片和主应用使用相同的bundleName
  • 路由路径需与route_map.json中的配置完全一致
  • 需要在前景状态下才能执行页面跳转

这种方法利用了HarmonyOS的卡片交互机制，通过postCardAction传递路由参数，在UIAbility中解析后使用Navigation跳转到指定页面。

回到顶部