HarmonyOS NEXT Practical: Startup Page

Goal: To enable the app to start with ads on the startup page, and to manually turn off ads and redirect to the homepage after 5 seconds. Approach: The entrance page should be set as the startup page Start the page and use a timer to jump to the homepage after the countdown ends Knowledge points: Page routing (@ohos. router) Page routing refers to the implementation of redirection and data transfer between different pages in an application. The Router module can easily route pages and access different pages through different URL addresses. This article will introduce how to implement page routing through the Router module from the aspects of page jump, page return, adding an inquiry box before page return, and named routing. The Router module provides two jump modes, namely router.pushURL and router.replaceURL. These two modes determine whether the target page will replace the current page. Router.pushURL: The target page will not replace the current page, but will be pushed into the page stack. This can preserve the state of the current page and return to the current page by using the return key or calling the router.back method. Router.replaceURL: The destination page will replace the current page and destroy it. This can free up resources on the current page and prevent returning to the current page. setInterval timer setInterval(handler: Function | string, delay: number, ...arguments: any[]): number Repeatedly calling a function with a fixed time delay between each call. Deleting this timer requires manually calling the clearInterval interface. clearInterval clearInterval(intervalID?: number): void Repeated scheduled tasks set through setInterval() can be cancelled. The timer object is saved in the thread that created it, and deleting the timer requires deleting it in the thread that created it. Actual combat: LaunchPage import { router } from '@kit.ArkUI'; @Entry @Component struct LaunchPage { timer: number = 0 @State time: number = 5 onPageShow(): void { this.timer = setInterval(() => { this.time--; if (this.time === 0) { clearInterval(this.timer); // 关闭定时器 router.replaceUrl({ url: 'pages/44LaunchPage/IndexPage' }); } }, 1000) } build() { Column({ space: 10 }) { Row({ space: 10 }) { Text(`${this.time}秒后自动关闭`) //倒计时 Button('关闭', { type: ButtonType.Capsule, stateEffect: true }) .borderRadius(6) .backgroundColor(Color.Gray) .onClick(() => { clearInterval(this.timer); // 关闭定时器 router.replaceUrl({ url: 'pages/44LaunchPage/IndexPage' }); }) } .width('100%') .justifyContent(FlexAlign.End) Text('启动页实战') .id('LaunchPageHelloWorld') .fontSize(20) .fontWeight(FontWeight.Bold) Text('通常，启动页为企业广告') Text('建议：启动页要有手动关闭的按钮') Text('建议：最好不要有启动页广告，这样会更友好') } .width('100%') .height('100%') .alignItems(HorizontalAlign.Start) .padding({ right: 20, left: 20 }) } } EntryAbility import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; const DOMAIN = 0x0000; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate'); } onDestroy(): void { hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy'); } onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); windowStage.loadContent('pages/44LaunchPage/LaunchPage', (err) => { if (err.code) { hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err)); return; } hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.'); }); } onWindowStageDestroy(): void { // Main window is destroyed, release UI related resources hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); } onForeground(): void { // Ability has brought to foreground hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground'); } onBackground(): void { // Ability has back to background hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground'); } } [/code] IndexPage [code] @Entry @Component struct IndexPage { @State message: string = '启动页实战-首页'; build() { Column() { Text(this.message) .id('IndexPageHelloWorld') .fontSize(30) .fontWeight(FontWeight.Bold) } .height('100%') .width('100%') } }

Mar 28, 2025 - 08:10

Goal: To enable the app to start with ads on the startup page, and to manually turn off ads and redirect to the homepage after 5 seconds.

Approach:

The entrance page should be set as the startup page
Start the page and use a timer to jump to the homepage after the countdown ends

Knowledge points:
Page routing (@ohos. router)
Page routing refers to the implementation of redirection and data transfer between different pages in an application. The Router module can easily route pages and access different pages through different URL addresses. This article will introduce how to implement page routing through the Router module from the aspects of page jump, page return, adding an inquiry box before page return, and named routing.

The Router module provides two jump modes, namely router.pushURL and router.replaceURL. These two modes determine whether the target page will replace the current page.

Router.pushURL: The target page will not replace the current page, but will be pushed into the page stack. This can preserve the state of the current page and return to the current page by using the return key or calling the router.back method.
Router.replaceURL: The destination page will replace the current page and destroy it. This can free up resources on the current page and prevent returning to the current page.

setInterval timer

setInterval(handler: Function | string, delay: number, ...arguments: any[]): number

Repeatedly calling a function with a fixed time delay between each call.
Deleting this timer requires manually calling the clearInterval interface.

clearInterval

clearInterval(intervalID?: number): void

Repeated scheduled tasks set through setInterval() can be cancelled.
The timer object is saved in the thread that created it, and deleting the timer requires deleting it in the thread that created it.

Actual combat:
LaunchPage

import { router } from '@kit.ArkUI';

@Entry
@Component
struct LaunchPage {
  timer: number = 0
  @State time: number = 5

  onPageShow(): void {
    this.timer = setInterval(() => {
      this.time--;
      if (this.time === 0) {
        clearInterval(this.timer); // 关闭定时器
        router.replaceUrl({ url: 'pages/44LaunchPage/IndexPage' });
      }
    }, 1000)
  }

  build() {
    Column({ space: 10 }) {
      Row({ space: 10 }) {
        Text(`${this.time}秒后自动关闭`) //倒计时
        Button('关闭', { type: ButtonType.Capsule, stateEffect: true })
          .borderRadius(6)
          .backgroundColor(Color.Gray)
          .onClick(() => {
            clearInterval(this.timer); // 关闭定时器
            router.replaceUrl({ url: 'pages/44LaunchPage/IndexPage' });
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.End)

      Text('启动页实战')
        .id('LaunchPageHelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text('通常，启动页为企业广告')
      Text('建议：启动页要有手动关闭的按钮')
      Text('建议：最好不要有启动页广告，这样会更友好')
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
    .padding({ right: 20, left: 20 })
  }
}

EntryAbility

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

const DOMAIN = 0x0000;

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
  }

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

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

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
  }
}
[/code]
IndexPage 
[code]
@Entry
@Component
struct IndexPage {
  @State message: string = '启动页实战-首页';

  build() {
    Column() {
      Text(this.message)
        .id('IndexPageHelloWorld')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

    }
    .height('100%')
    .width('100%')
  }
}