【需求】
打开时 APP,加载后台配置广告,若干秒后自动关闭广告页,并显示首页
【解决思路】
- 在 EntryAbility 中,创建应用子窗口,加载广告页。
- 在广告页中,开启定时器,倒数完成后关闭子窗口。子窗口关闭后,会显示 app 首页。
【代码】
- 在 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')
}
- 编写子窗口页面
@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%')
}
}
【效果图】
![启动页 启动页](https://i-blog.csdnimg.cn/direct/b1c36558cf8047db8b38352903addd6b.png)
![首页 首页](https://i-blog.csdnimg.cn/direct/ce32f69aa5bd49da915856c606a0f3dd.png)