Routing Singleton Pattern, Routing Warnings, Verification Code Popups, Custom Routing Table Implementation

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Routing Singleton Pattern, Routing Warnings, Verification Code Popups, Custom Routing Table Implementation, Querying Screen Orientation

1. Is there a way in HarmonyOS Navigation to implement a singleton pattern similar to RouterMode in Router?

Reference demo:

pushPathsingleTask(info: NavPathInfo, animated?: boolean): void {
  this.pageArray = [];
  this.pageArray = this.pageInfos.getIndexByName(info.name);
  if (this.pageArray.length === 0) {
    this.pageInfos.pushPath(info, animated);
    return;
  }
  this.pageInfos.popToIndex(this.pageArray.pop(), animated);
}

2. HarmonyOS: Warning when using routeName. Is there an alternative?

@Entry({ routeName: ‘JLShowPrivacyPage’ })

Alert: "It’s not a recommended way to export struct with @Entry decorator, which may cause ACE Engine error in component preview mode"

Question: Will this warning cause exceptions during actual use? If so, what's the alternative?

Answer: This warning can be ignored. It may cause exceptions only in preview mode, but works fine on real devices.

3. HarmonyOS: Demo for preventing SMS verification code abuse with image captcha or slider verification?

import promptAction from '@ohos.promptAction';
let customDialogId: number = 0;
let sliderValue = 0;

@Builder
function customDialogBuilder() {
  Column() {
    Row({ space: 20 }) {
      Text('安全验证')
        .fontSize(26)
        .width('80%')
        .height(60)
        .textAlign(TextAlign.Center)
        .lineHeight(60);
      Image($r('app.media.error'))
        .width(26)
        .height(26)
        .onClick(() => {
          promptAction.closeCustomDialog(customDialogId);
        });
    }
    .margin({ bottom: 16 });

    Stack() {
      Text("请滑到最右端")
        .fontSize(20)
        .onClick(() => {
          promptAction.closeCustomDialog(customDialogId);
        });
      Slider({ style: SliderStyle.InSet, value: sliderValue })
        .trackColor('rgba(40,40,40,0.5)')
        .selectedColor('rgba(200,200,200,1)')
        .trackThickness(66)
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r('app.media.arrow') })
        .onChange((value: number, mode: SliderChangeMode) => {
          if (value === 100) {
            promptAction.closeCustomDialog(customDialogId);
          }
        });
    }
    .height(90)
    .width('80%');
  }
  .height(220)
  .padding(5);
}

@Entry
@Component
struct Index {
  @State message: string = '获取验证码';

  build() {
    Row() {
      Column() {
        Button(this.message)
          .fontSize(50)
          .padding(16)
          .onClick(() => {
            promptAction.openCustomDialog({
              builder: customDialogBuilder.bind(this)
            }).then((dialogId: number) => {
              customDialogId = dialogId;
            });
          });
      }
      .width('100%');
    }
    .height('100%');
  }
}

4. HarmonyOS: Complete demo for custom routing tables and dynamic routing?

Reference: App Navigation Design

5. HarmonyOS: Query current screen orientation (portrait/landscape)?

1. Listen for orientation changes:

let listener = mediaquery.matchMediaSync('(orientation: landscape)');

2. Query current orientation:

let orientation: number = display.getDefaultDisplaySync().orientation;
switch (orientation) {
  case display.Orientation.PORTRAIT:
    this.status = '竖屏';
    break;
  case display.Orientation.LANDSCAPE:
    this.status = '横屏';
    break;
  case display.Orientation.PORTRAIT_INVERTED:
    this.status = '反向竖屏';
    break;
  case display.Orientation.LANDSCAPE_INVERTED:
    this.status = '反向横屏';
    break;
  default:
    this.status = '不知道';
}

Additional methods:

Use display.on('windowSizeChange') to listen for screen changes.
Configure orientation: auto_rotation in module.json5 for auto-rotation.
Dynamically set orientation with window.setPreferredOrientation. Reference: Display API

DEV Community