#深入浅出学习eTs#（十四）我的专属广告原创

程皖Orz

发布于 2022-12-29 10:29

浏览

0收藏

本项目Gitee仓地址：深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)

一、需求分析

#深入浅出学习eTs#（十四）我的专属广告-鸿蒙开发者社区
大家使用手机的时候一定显示过广告，一般是中间是主图，右上角显示跳过，我们需要点击跳过才能跳过广告，本次我们就来制作一个这样的自己专属广告

进入APP弹出
显示广告内容
右上角点击跳过
倒计时到达自动跳转

二、控件介绍

页面跳转（Router、Ability）

页面跳转可以分为页面内跳转和页面间跳转，页面内跳转是指所跳转的页面在同一个 Ability 内部，它们之间的跳转可以使用 Router 或者 Navigator 的方式；页面间跳转是指所跳转的页面属与不同的 Ability ，这种跳转需要借助 featureAbility 实现。

本内容主要涉及页面内跳转，实现内部的显示，主要使用到的是Router：

declare namespace router {
  function push(options: RouterOptions):void;
  function replace(options: RouterOptions):void;
  function back(options?: RouterOptions ):void;
  function clear():void;
  function getLength():string;
  function getState():RouterState;
  function enableAlertBeforeBackPage(options: EnableAlertOptions):void;
  function disableAlertBeforeBackPage():void;
  function getParams(): Object;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

push：打开新的页面，新页面在栈顶位置， RouterOptions 定义了以下参数：
url：目标页面的路径，该路径必须在 config.json 的 pages 下配置，否则不起作用。
params：可选参数，向目标页面传递参数。
replace：新页面替换当前页面并把当前页面销毁。
back：返回上一页。
clear：清空路由栈里的其它页面。
getLength：获取当前路由栈里的页面数量。
getState：获取当前页面的状态.
enableAlertBeforeBackPage：
disableAlertBeforeBackPage：
getParams：获取通过路由传递过来的参数。

// 第一个页面
@Entry @Component struct ComponentTest {
  build() {
    Column({space: 10}) {
      Text('第一个页面')
        .fontSize(30)
        .width('100%')
        .textAlign(TextAlign.Center)

      Button('打开下一页')
        .onClick(() => {
          router.push({          // 使用push入栈一个新页面
            url: "pages/second"  // 通过url指定新打开的页面
          })
        })
    }
    .size({width: '100%', height: '100%'})
  }
}

// 第二个页面
@Entry @Component struct Second {

  build() {
    Column({space: 10}) {
      Text('第二个页面')
        .fontSize(30)
        .width('100%')
        .textAlign(TextAlign.Center)

      Button('返回上一页')
        .onClick(() => {
          router.back(); // 返回上一页，当前页面会销毁
        })
    }
    .size({width: '100%', height: '100%'})
  }
}
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.

Stack

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

接口

Stack(value?: { alignContent?: Alignment })

参数：

参数名	参数类型	必填	参数描述
alignContent	Alignment	否	设置子组件在容器内的对齐方式。默认值：Alignment.Center

// xxx.ets
@Entry
@Component
struct StackExample {
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
    }.width('100%').height(150).margin({ top: 5 })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

#深入浅出学习eTs#（十四）我的专属广告-鸿蒙开发者社区

三、UI设计

（1）两个页面跳转

#深入浅出学习eTs#（十四）我的专属广告-鸿蒙开发者社区
此处一定要新建page文件，否则无法跳转

（2）广告导入

首先需要一张底图，放在第一个页面
#深入浅出学习eTs#（十四）我的专属广告-鸿蒙开发者社区

@Entry @Component struct ComponentTest {
  build() {
    Column({space: 10}) {

      Image($r('app.media.2')).objectFit(ImageFit.Fill)


    }
    .size({width: '100%', height: '100%'})
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

此时需要在右上角加入一个标签
#深入浅出学习eTs#（十四）我的专属广告-鸿蒙开发者社区

      Row() {
        Blank(10)
        Column() {
          Blank().height(10)
          Text('跳过').width('15%').height('5%')
            .backgroundColor(0xc1cbac)
            .align(Alignment.TopEnd)
            .fontSize(20)
            .textAlign(TextAlign.Center)
            .border({
              radius: 15,
            })
        }
        Column(){
          Text(this.Num)
            .fontSize(20)
            .backgroundColor(0xc1cbac)
          Blank(6)
        }

        Blank(10)
      }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

（3）定时器实现

首先需要将标签内容和变量进行绑定，创建变量

@State Num: string = '5s'
1.

之后创建定时器，实现秒减

  private Run_Get() {
    var T = setInterval(() => {
      if (this.Num == '0s') {
        clearTimeout(T)
        router.push({          // 使用push入栈一个新页面
          url: "pages/Lal"  // 通过url指定新打开的页面
        })
      } else if(this.Num == '5s')
      {
        this.Num = '4s';
      }else if(this.Num == '4s')
      {
        this.Num = '3s';
      }else if(this.Num == '3s')
      {
        this.Num = '2s';
      }else if(this.Num == '2s')
      {
        this.Num = '1s';
      }else if(this.Num == '1s')
      {
        this.Num = '0s';
      }
    }, 1000)
  }

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.

在开机时候进行使用

  onPageShow(){
    this.Run_Get()
  }
1.
2.
3.

（4）点击跳转

跳转一共有两种形式：时间到了跳转和点击跳转，这里介绍点击跳转

      .onClick(() => {
        router.push({          // 使用push入栈一个新页面
          url: "pages/Lal"  // 通过url指定新打开的页面
        })
      });
1.
2.
3.
4.
5.