【HarmonyOS NEXT】实现启动广告页

【需求】

打开时 APP，加载后台配置广告，若干秒后自动关闭广告页，并显示首页

【解决思路】

1. 在 EntryAbility 中，创建应用子窗口，加载广告页。
2. 在广告页中，开启定时器，倒数完成后关闭子窗口。子窗口关闭后，会显示 app 首页。

【代码】

1. 在 EntryAbility，onWindowStageCreate 回调中，创建子窗口

export default class EntryAbility extends UIAbility {
  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
    // ...
    await showStartAd(windowStage, this.context)
    // ...
  }
}

/**
 * 打开启动广告
 * @param windowStage
 * @param ctx
 */
async function showStartAd(windowStage: window.WindowStage, ctx: Context) {
  const adStore = new AdStore(ctx)
  const ad = await getStartAd() // 获取广告数据
  await adStore.setStartAd(ad) // 写入首选项
  const win = await windowStage.createSubWindow(OPEN_SUB_WINDOW_KEY) // 创建子窗口
  await win.showWindow()
  win.setUIContent('pages/OtherDemo/StartAd')
}

2. 编写子窗口页面

@Entry
@Component
struct StartAd {
  @State adObj: AdvertModel = {
    showAd: false,
    adTime: 0
  }
  adStore: AdStore = new AdStore(getContext())
  timer: number = -1

  async aboutToAppear() {
    this.getStartAd()
  }

  aboutToDisappear(): void {
    clearInterval(this.timer)
  }

  closeWin() {
    const win = window.findWindow(OPEN_SUB_WINDOW_KEY) // 找到子窗口
    win.destroyWindow() // 销毁窗口
  }

  async getStartAd() {
    this.adObj = await this.adStore.getStartAd()
    this.timer = setInterval(() => {
      if (this.adObj.adTime === 0) {
        clearInterval(this.timer)
        this.closeWin()
        return
      }
      this.adObj.adTime--
    }, 1000)
  }

  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image(this.adObj.adImg).objectFit(ImageFit.Cover)
      Text(`${this.adObj.adTime}秒后跳过`)
        .padding({ left: 10, right: 10 })
        .margin({ right: 20, top: 50 })
        .height(30)
        .fontSize(14)
        .borderRadius(15)
        .backgroundColor('#66F4F4F4')
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.closeWin()
        })
    }.height('100%').width('100%')
  }
}

【效果图】

5秒后跳转=>