鸿蒙开发—黑马云音乐之广告页

目录

1.页面布局

2.点击按钮跳转

3.倒计时自动跳转

---

接下来是项目实战，项目选用传智的黑马云音乐。

效果图如下：

1.页面布局

@Entry
@Component
struct ADPage {
  @State message: string = 'Hello World'

  build() {
    Stack({alignContent:Alignment.TopEnd}) {
      Image($r('app.media.ad'))
      Button({type:ButtonType.Normal}) {
        Text('跳过5')
          .fontSize(14)
          .fontColor(Color.White)
      }
      .margin({top:10,right:10})
      .padding(10)
      .borderRadius(20)
      .backgroundColor('#ffc7c8c8')
    }
  }
}

给主体增加一个stack容器，先放一张广告图片，建议选择本地图片，再放一个button，之后微调样式与位置。

2.点击按钮跳转

// 广告页的布局+逻辑
import router from '@ohos.router'

@Entry
@Component
struct ADPage {
  @State message: string = 'Hello World'

  build() {
    Stack({alignContent:Alignment.TopEnd}) {
      // 背景图片
      Image($r('app.media.ad'))

      // 背景图上的按钮
      Button({type:ButtonType.Normal}) {
        Text('跳过5')
          .fontSize(14)
          .fontColor(Color.White)
      }
      .margin({top:10,right:10})
      .padding(10)
      .borderRadius(20)
      .backgroundColor('#ffc7c8c8')
      .onClick(()=>{
      // 当用户点击按钮以后会被执行
      // 跳转到Index页面
        router.replaceUrl({url:'pages/Index'})
      })
    }
  }
}

给stack增加一个onclick属性，点击后会触发里面的内容或函数，设置跳转位置Index页。

3.倒计时自动跳转

页面进入的时候启动倒计时，可以在ets页面中使用aboutToAppear()方法

aboutToAppear()方法开启倒计时，倒计时可以使用setInterval()

import router from '@ohos.router'

@Entry
@Component
struct ADPage {
  @State count: number = 5 //表示5秒钟

  aboutToAppear() {
    // 开启倒计时功能，5秒以后自动跳转到首页
    // 1秒 = 1000毫秒
    setInterval(() => {
      this.count--
      console.log('触发:', this.count)
      //  如果this.count 等于0的时候，跳转到首页
      if (this.count == 0) {
        router.replaceUrl({ url: 'pages/Index' })
      }
    }, 1000)

    // router.replaceUrl({ url: 'pages/Index' })
  }

  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      // 背景图片
      Image($r('app.media.ad'))

      // 背景图上的按钮
      Button({ type: ButtonType.Normal }) {
        Text(`跳过${this.count}`)
          .fontSize(14)
          .fontColor(Color.White)
      }
      .margin({ top: 10, right: 10 })
      .padding(10)
      .borderRadius(20)
      .backgroundColor('#ffc7c8c8')
      .onClick(() => {
        // 当用户点击按钮以后会被执行
        // 跳转到Index页面
        router.replaceUrl({ url: 'pages/Index' })
      })
    }
  }
}

@State count: number = 5，设置变量count，初始值为5。

在aboutToAppear()方法中使用setInterval()。

 this.count--，count自减。

 if (this.count == 0) {
        router.replaceUrl({ url: 'pages/Index' })

判断count值，满足之后跳转到Index。

 console.log('触发:', this.count) 可以查看日志

查看步骤如下：

1）添加设备

2）启动模拟器

3）运行项目

4）查询

console.log('触发:', this.count)一开始设置的关键词是触发，输入触发搜索。

Text('跳过5')要改为Text(`跳过${this.count}`)，这里单引号改为反引号“  ``  ”，引用变量固定格式。