#HarmonyOS NEXT 体验官#根据router事件卡片跳转 原创

鸿蒙时代
发布于 2024-8-3 10:17
浏览
0收藏

一、介绍
基于鸿蒙Next实现由router事件,卡片热区跳转指定页面。
二、场景需求

电商购物卡片:

新闻或内容聚合平台:

个人资料页面:

项目管理工具:

在线教育平台:

候选人筛选页面:

活动推广:

金融服务平台:

每个场景中,设计良好的热区不仅提升了用户体验,还能有效引导用户进行交互,增加转化率。合理的热区布局和跳转逻辑能帮助用户更快速地找到所需信息,提高使用效率。

三、业务步骤
第一步:点击卡片上的按钮,跳转不同页面。
第二部:跳转进入指定页面。
四、效果展示
#HarmonyOS NEXT 体验官#根据router事件卡片跳转-鸿蒙开发者社区
五:代码展示:
HOME.ets

@Entry
@Component
struct Index08 {
  @State message: string = 'HOME 页面';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Index08HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

TEST.est

@Entry
@Component
struct Index08_1 {
  @State message: string = 'TEST 页面';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Index08_1HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}


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

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

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

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 获取router事件中传递的targetPage参数
    hilog.info(DOMAIN_NUMBER, TAG, `Ability onCreate, ${JSON.stringify(want)}`);
    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 {
    hilog.info(DOMAIN_NUMBER, TAG, `onNewWant Want: ${JSON.stringify(want)}`);
    if (want.parameters?.params !== undefined) {
      let params: Record<string, string> = JSON.parse(JSON.stringify(want.parameters));
      this.selectPage = params.targetPage;
    }
    if (this.currentWindowStage !== null) {
      this.onWindowStageCreate(this.currentWindowStage);
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    let targetPage: string;
    // 根据传递的targetPage不同,选择拉起不同的页面
    switch (this.selectPage) {
      case 'home':
        targetPage = 'pages/Index08';
        break;
      case 'test':
        targetPage = 'pages/Index08_1';
        break;
      default:
        targetPage = 'pages/Index';
    }
    if (this.currentWindowStage === null) {
      this.currentWindowStage = windowStage;
    }
    windowStage.loadContent(targetPage, (err, data) => {
      if (err.code) {
        hilog.error(DOMAIN_NUMBER, TAG, 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(DOMAIN_NUMBER, TAG, 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }
}


widget_router.ets

@Entry
@Component
struct WidgetEventRouterCard {
  build() {
    Column() {
      Row() {
        Column() {
          Button('主页')
          .width(120)
          .height(32)
          .borderRadius(16)
            .margin({bottom:10})
          .onClick(() => {
            postCardAction(this, {
              action: 'router',
              abilityName: 'EntryAbility',
              params: { targetPage: 'home' }
            });
          })

          Button('测试页')
          .width(120)
          .height(32)
          .borderRadius(16)
          .onClick(() => {
            postCardAction(this, {
              action: 'router',
              abilityName: 'EntryAbility',
              params: { targetPage: 'test' }
            });
          })
        }
      }.width('100%').height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
    .backgroundColor(0xfac977)
  }
}

六、代码结构及原理:
1.在卡片页面中布局两个按钮,点击其中一个按钮时调用postCardAction向指定UIAbility发送router事件,并在事件内定义需要传递的内容。
主页ui布局采用@state变量获取值,使用RelativeContainer组件。
2.
3.在UIAbility中接收router事件并获取参数,根据传递的params不同,选择拉起不同的页面。
4.获取router事件中传递的targetPage参数。
5.如果UIAbility已在后台运行,在收到Router事件后会触发onNewWant生命周期回调。
6.根据传递的targetPage不同,选择拉起不同的页面。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
已于2024-8-3 10:22:20修改
收藏
回复
举报
回复
    相关推荐