广告页就是一张图，然后右上角加上一个跳过按钮。因此可以利用层叠布局。

另外就是点击按钮要能进入主页面，以及静待3秒后要能自动进入主页面。

“跳过”按钮在右上角，可以用.align(Alignment.TopEnd)来进行右上对齐，然后再用margin调一下边距。

注意到广告页面是只能看到一次的，因此跳转函数需要换一个，由pushPathByName换成replacePathByName函数即可。这样进入布局页后无法再返回到广告页。

过3秒自动结束广告的实现思路：Start页面一打开就开始计时，3秒后自动跳转。需要用到aboutToAppear()函数，在Start页面的生命周期会存在。在该函数内使用setTimeout函数。

setTimeout会在规定时间结束后执行箭头函数的内容，从而实现我们要的功能。

至此我们已经实现了广告页该有的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 广告页面入口函数
@Builder
export function StartBuilder() {
  Start();
}

@Component
struct Start {
  // 控制跳转的对象
  pathStack: NavPathStack = new NavPathStack();
  // 过3秒后自动结束广告
  aboutToAppear(): void {  // 生命周期
    setTimeout(() => {
      this.pathStack.replacePathByName("Layout", null, false)
    }, 3000)   //  以毫秒为单位
  }
  build() {
    NavDestination() {
      Stack() {
        Image($r('app.media.ad'))
          .width('100%')
          .height('100%')
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        Button('跳过')
          .backgroundColor(Color.Grey)
          .margin({right:15, top:15})
          .onClick(() => {
            this.pathStack.replacePathByName("Layout", null, false)
          })
      }
      .align(Alignment.TopEnd)
    }
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })

  }
}