HarmonyOS鸿蒙Next中Navigation模式卡片打开的指定页面

HarmonyOS鸿蒙Next中Navigation模式卡片打开的指定页面

Navigation 模式卡片点击怎么打开指定的页面呢，如果目标页面已经在栈顶则刷新页面数据，如果目标页面是栈中的最下面的一个，则关闭目标页面上面的所有页面，让目标页面显示到栈顶，这种要怎么处理呢？

3 回复

在onNewWant中调用loadContent 会导致页面重新渲染，若不想重新渲染，则不能调用loadContent。可以考虑在Index页面的onPageShow方法中进行跳转判断，参数传递可以使用AppStorage来代替。更改如下：

//EntryAbility
import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

const TAG: string = 'EntryAbility';
const DOMAIN_NUMBER: number = 0xFF00;

export default class EntryAbility extends UIAbility {

  private selectPage: string = '';

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    if (want?.parameters?.params) {
      // want.parameters.params 对应 postCardAction() 中 params 内容
      let params: Record<string, Object> = JSON.parse(want.parameters.params as string);
      this.selectPage = params.targetPage as string;
      hilog.info(DOMAIN_NUMBER, TAG, `onCreate selectPage: ${this.selectPage}`);
    }
  }

  // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(DOMAIN_NUMBER, TAG, `Ability onNewWant: ${JSON.stringify(want?.parameters)}`);
    if (want?.parameters?.params) {
      // want.parameters.params 对应 postCardAction() 中 params 内容
      let params: Record<string, Object> = JSON.parse(want.parameters.params as string);
      this.selectPage = params.targetPage as string;
      AppStorage.setOrCreate('selectPage', this.selectPage); //将参数存贮在AppStorage中
      hilog.info(DOMAIN_NUMBER, TAG, `onNewWant selectPage: ${this.selectPage}`);
    } else {
      AppStorage.setOrCreate('selectPage', '');
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }
}

//Index
@Entry
@Component
struct Index {
  pageStack : NavPathStack = new NavPathStack();
  defaultPage: string  = 'PageOne'
  selectPage: string = '';

  onPageShow(): void {
    this.selectPage = AppStorage.get('selectPage') as string
    if (this.selectPage!=='' && this.selectPage!=undefined) {
      //在这里判断跳转指定页面
      this.pageStack.pushPath({ name: this.selectPage  },{
        launchMode: LaunchMode.POP_TO_SINGLETON
      });
    }
  }

  build() {
    Navigation(this.pageStack){
    }
    .hideNavBar(true)
    .onAppear(()=>{
      this.pageStack.pushPath({ name: this.defaultPage });
    })
  }
}

更多关于HarmonyOS鸿蒙Next中Navigation模式卡片打开的指定页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Navigation模式卡片打开的指定页面可以通过Navigation组件和router模块实现。使用Navigation组件定义导航结构，通过router.push或router.replace方法跳转到指定页面。页面路径需在config.json中配置，确保页面注册正确。

在HarmonyOS Next中处理Navigation模式卡片的页面跳转逻辑，可以通过以下方式实现：

  1. 使用Router模块进行页面导航管理：
import router from '@ohos.router';

function navigateToTargetPage(targetUrl: string) {
  const pages = router.getPages();
  
  // 检查目标页面是否已在栈中
  const targetIndex = pages.findIndex(page => page.url === targetUrl);
  
  if (targetIndex !== -1) {
    if (targetIndex === pages.length - 1) {
      // 目标页面在栈顶，刷新数据
      router.push({
        url: targetUrl,
        params: { refresh: true }
      });
    } else {
      // 目标页面在栈中，关闭上方所有页面
      router.back({
        index: pages.length - 1 - targetIndex
      });
    }
  } else {
    // 新页面，正常跳转
    router.push({ url: targetUrl });
  }
}
  1. 在目标页面接收参数处理刷新逻辑：
onPageShow() {
  const params = router.getParams();
  if (params?.refresh) {
    // 执行数据刷新逻辑
    this.loadData();
  }
}
  1. 卡片点击事件绑定：
// 在卡片代码中
onClick() {
  navigateToTargetPage('pages/TargetPage');
}

这种方法利用了HarmonyOS的路由管理能力，通过检查页面栈状态实现了三种场景的处理：

  • 新页面跳转
  • 栈顶页面刷新
  • 中间页面回退

注意确保所有页面都已在config.json中正确配置路由信息。

回到顶部