HarmonyOS NEXT中自定义广告的四种模式-根据场景选择

一、应用场景

app冷启动/热启动-有广告需求，就打开广告页，没有的话就去登录或者主页
华为有广告业务，但是我们不用
自定义一个ad模块，但是根据不同的业务场景和需求，可以使用不同的打开广告方式

• 应用启动时，有广告则直接进入广告页，定时竣事或点击跳过，跳转到首页
  
• 打开子窗口，然后通过销毁子窗口方式关闭广告
  
• 封装window窗口广告模式，关闭时直接调用封装的关闭方法
  
• 采用与页面解耦的模式实现广告，关闭时候直接调用封装的关闭方法
  

总结处有附完备代码
二、新建一个关于广告类的数据模子

1.创建广告类

这个广告模子其实在那里创建不影响，只要导出，在需要用到的地方可以正常导入就行，由于本项目有har包，就直接创建到har包里-basic- viewmodels/advert.ets

1. export class AdvertClass {
2.   showAd: boolean = false // 是否展示广告
3.   isFull: boolean = true // 是否全屏
4.   adTime: number = 5 // 倒计时数据
5.   adUrl?: string = "" // 要跳转的连接
6.   adImg?: ResourceStr = "" // 图片连接
7. }
9. // 全屏广告 半屏广告

复制代码

2.本地存储广告用来读取和设置广告

这里用的方式不同于首选项方式，而是使用AppStorage和持久化本地存储的方式，这种方式更加简单。
当然无论是首选项的方式还是什么都只是将广告信息存储，都不影响后面任何模式的使用。
utils/setting.ets

1. import { USER_SETTING, USER_SETTING_AD } from '../constants'
2. import { AdvertClass } from '../viewmodels'
4. export const defaultAd: AdvertClass = {
5.   showAd: true,
6.   isFull: true,
7.   adTime: 3,
8.   adImg: $r("app.media.start")
9. }
11. // 首选项方式，每次使用前记得给context赋值
12. // 负责首选项的读取
13. // export class UserSetting {
14. //   context?: Context
15. //   // 获取仓库
16. //   getStore () {
17. //     return preferences.getPreferencesSync(this.context || getContext(), {
18. //       name: USER_SETTING
19. //     })
20. //   }
21. //   // 设置用户广告
22. //   async setUserAd(ad: AdvertClass) {
23. //     const store = this.getStore()
24. //     store.putSync(USER_SETTING_AD, ad)
25. //     await store.flush()  // 让外界能够控制自己的流程
26. //   }
27. //   // 获取用户广告
28. //   getUserAd() {
29. //     const store = this.getStore()
30. //     return store.getSync(USER_SETTING_AD, defaultAd) as AdvertClass
31. //   }
32. // }
33. export class UserSetting{
34.   // 初始化仓库
35.   initUserSetting(){
36.     PersistentStorage.persistProp<AdvertClass>(USER_SETTING_AD,defaultAd)
37.   }
38.   // 设置用户广告
39.   setUserAd(ad: AdvertClass) {
40.     AppStorage.setOrCreate<AdvertClass>(USER_SETTING_AD, ad)
41.   }
42.   // 获取用户广告
43.   getUserAd(){
44.     return AppStorage.get<AdvertClass>(USER_SETTING_AD)
45.   }
46. }
49. export const userSetting = new UserSetting() // 导出一个单例

复制代码

这里初始化本地仓库的代码不能放到要在EntryAbility中的onWindowStageCreate中，官网的意思最早也是UI实例初始化后才能持久化。
PersistentStorage：持久化存储UI状态
PersistentStorage和UI实例相关联，持久化操纵需要在UI实例初始化成功后（即loadContent传入的回调被调用时）才可以被调用，早于该时机调用会导致持久化失败。
EntryAbility.ets

1. onWindowStageCreate(){
2. // ...省略
3. // 初始化广告仓库
4. windowStage.loadContent('pages/Index', (err) => {
5.       if (err.code) {
6.         hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
7.         return;
8.       }
9.       // 初始化广告仓库
10.       userSetting.initUserSetting()
12.       hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
13.     });
14. // ...省略
15. }

复制代码

这里还要设置常量USER_SETTING_AD，但由于用的不是首选项，所以只要广告名，不需要仓库名
constants/index.ets

1. export const USER_SETTING_AD = 'fast_driver_setting_ad' // 用来存储用户设置广告首选项的key

复制代码

假如你使用的是har包存放静态资源，末了统一在basic/Index.ets统一导出所有资源，但是这样导出有个bug，在使用的地方导入，会有代码提示，但是会报错说找不到导出的资源
basic/Index.ets可能报错

1. export * from 'ets/utils'
3. export * from 'ets/constants'
5. export * from 'ets/viewmodels'

复制代码

假如报错请补全路径
basic/Index.ets

1. export * from './src/main/ets/utils'
3. export * from './src/main/ets/constants'
5. export * from './src/main/ets/viewmodels'

复制代码

假如是在har包中定义的数据，记得在entry中导入你har包的数据.
entry/oh-package.json5

1. {
2.   "name": "entry",
3.   "version": "1.0.0",
4.   "description": "Please describe the basic information.",
5.   "main": "",
6.   "author": "",
7.   "license": "",
8.   "dependencies": {
9.     "basic":"file:../basic"
10.   }
11. }

复制代码

3.新建一个广告页面Start

Start页面中，读取本地存储的广告，展示广告内容，实现倒计时逻辑，倒计时竣事或者点击跳过都会调用toMain()方法。
toMain()方法其实就是你关闭广告的方式，选择不同的广告模式，就要修改不同的toMain()方法
前三种模式都会用到Start页面，所以选择不同方式打开广告，就要用不同方式去关闭广告。
pages/Start/Start.ets

1. import { AdvertClass, userSetting } from 'basic'
2. import { router } from '@kit.ArkUI'
4. @Entry
5. @Component
6. struct Start {
7.   // 需要广告对象
8.   @State
9.   ad: AdvertClass = new AdvertClass()
10.   timer: number = -1 // 用来记录定时器的标记
12.   // @State
13.   // ad: Partial<AdvertClass> = {}
14.   aboutToAppear(): void {
15.     // 获取首选项的广告数据给到ad
16.     this.getAdInfo()
17.   }
19.   getAdInfo() {
20.     // 首选项的读取
21.     this.ad = userSetting.getUserAd()
22.     // 开启倒计时了
23.     if (this.ad.showAd) {
24.       // 如果真的展示广告要开始倒计时
25.       this.timer = setInterval(() => {
26.         if (this.ad.adTime === 0) {
27.           clearInterval(this.timer)
28.           this.toMain()
29.           return // return一定要写
30.         }
31.         this.ad.adTime--
32.       }, 1000)
33.     }
34.   }
36.   // 去主页的方法
37.   toMain() {
38.     // 关闭广告的方式
39.     打开方式不同，关闭方式也就不同
41.   }
43.   aboutToDisappear(): void {
44.     clearInterval(this.timer)
45.   }
47.   build() {
48.     RelativeContainer() {
49.       if (this.ad.showAd) {
50.         Image(this.ad.adImg)
51.           .width("100%")
52.           .height("100%")
53.           .objectFit(ImageFit.Cover)
54.         Text(`${this.ad.adTime}秒跳过`)
55.           .padding({
56.             left: 10,
57.             right: 10
58.           })
59.           .alignRules({
60.             right: {
61.               anchor: '__container__',
62.               align: HorizontalAlign.End
63.             },
64.             top: {
65.               anchor: '__container__',
66.               align: VerticalAlign.Top
67.             }
68.           })
69.           .borderRadius(15)
70.           .height(30)
71.           .fontSize(14)
72.           .backgroundColor($r("app.color.background_page"))
73.           .margin({
74.             right: 20,
75.             top: 20
76.           })
77.           .onClick(() => {
78.             // 此时跳过广告
79.             // 跳转到主页
80.             this.toMain()
81.           })
82.       }
84.     }
85.     .height('100%')
86.     .width('100%')
87.   }
88. }

复制代码

4.初始化广告信息

由于广告随时有切换的可能，但是我们又不能每次换个广告就去改源码，所以其实是通过发请求的方式，去获取广告的信息，但你有可能在启动时就需要打开广告页，所以依然是在EntryAbility中的onWindowStageCreate方法中就请求回广告信息，并存入本地存储，供广告页面使用。
不过这里我们模拟发送请求就好了，到时候有真实接口再真的请求数据
EntryAbility.ets

1. async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
2.     // Main window is created, set main page for this ability
3.     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
6.     // 假装向云端获取广告数据的请求
7.     const ad = await new Promise<AdvertClass>((resolve, reject) => {
8.       setTimeout(() => {
9.         resolve({
10.           showAd: true,
11.           isFull: true,
12.           adTime: 3,
13.           adImg: $r("app.media.start")
14.         })
15.       }, 500)
16.     })
18.     userSetting.setUserAd(ad); // 云端的广告设置到本地
19. }

复制代码

统统预备就绪，接下来就时选择不同打开广告方式了。
方式一：应用启动时，有广告则直接进入广告页

这种方式是直接判断有无广告，然后通过windowStage.loadContent()直接打开广告页或者首页，
不过在应用启动时打开广告比力实用，不得当在使用中途打开广告。
EntryAbility.ets

1. //在保存好ad广告信息后
3. //1. 判断是否需要展示广告
4.     const path = ad.showAd ? 'pages/Start/Start' : 'pages/Index'
5.     // 根据抽取的路径加载对应path, 如果要用这种模式，将默认路径 'pages/Index' 替换为path
6.     // 使用这种只适用于刚打开应用时，因为他的关闭方式其实是直接跳转到首页（固定的）
7.     windowStage.loadContent(path, (err) => {
8.       if (err.code) {
9.         hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
10.         return;
11.       }
12. // 初始化广告仓库
13.       userSetting.initUserSetting()
15.       hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
16.     });

复制代码

当然使用方式一就要在广告Start页面修改实用他的toMain()方法，点击跳过或者倒计时竣事，直接跳转到首页
Start.ets

1. toMain() {
2. // 1. 方式一打开广告，关闭是直接跳转到主页
3.     router.replaceUrl({
4.       url: 'pages/Index'
5.     })
6. }

复制代码

方式二：打开子窗口，然后通过销毁子窗口方式关闭广告

这种方式相当于在不影响加载主页的同时，另外打开了一个页面，覆盖在主页上，到时候关闭直接露出主页
EntryAbility.ets

1. // 2. 略微有点意思的模式：创建二级窗口，并展示广告
2.     // 用这种方式就在 'pages/Start/Start' 中将关闭广告的方法改为 2
3.     if (ad.showAd) {
4.       const win = await windowStage.createSubWindow("ad_win") // 二级窗口的实际对象
5.       await win.showWindow() // 展示二级窗口
6.       win.setUIContent("pages/Start/Start") // 二级窗口放的还是Start广告页
7.     }
8. // 这里还是需要正常打开首页的
9. windowStage.loadContent('pages/Index', (err) => {
10.       if (err.code) {
11.         hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
12.         return;
13.       }
14. // 初始化广告仓库
15.       userSetting.initUserSetting()
17.       hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
18.     });

复制代码

当然，在广告页Start中的toMain()，也要将关闭方式修改
Start.ets

1. toMain() {
2.     // 2.使用子窗口模式关闭广告
3.     clearInterval(this.timer) // 先清理一下定时器
4.     this.closeWin()
5. }
6. // 这个关闭方法传入刚才打开的子窗口名称即可
7. closeWin () {
8.     window.findWindow("ad_win").destroyWindow()
9.   }

复制代码

方式三：封装window窗口广告模式

这种方式是打开一个宽高自定义的窗口,然后把广告页面放在窗口中，通过封装类导出实例对象，调用showAd和closeAd方法来打开关闭广告。
假如不好理解可以先不用管内里具体的API都是什么，就看showAd方法和closeAd方法，和导出的实例，用实例调用打开和关闭的方法，看方法需要什么参数给他传什么参数就行了。

 utils/ad_manager.ets

1. import { display, window } from '@kit.ArkUI'
2. import { util } from '@kit.ArkTS'
4. export class AdManager {
5.   context?: Context // 是给ability使用的
6.   private winNames: string [] = []
8.   // 展示广告 采用windows窗口的创建和销毁的方式
9.   async showAd(url: string, width?: number, height?: number) {
10.     if (url) {
11.       let name = `win_${util.generateRandomUUID()}`
12.       const win = await window.createWindow({
13.         name,
14.         windowType: window.WindowType.TYPE_DIALOG,
15.         ctx: this.context || getContext()
16.       })
17.       if (width && width >= 320 && height && height >= 240) {
18.         const screen = display.getDefaultDisplaySync()
19.         let mainWidth = vp2px(width)
20.         let mainHeight = vp2px(height)
21.         win.resizeAsync(mainWidth, mainHeight)
22.         win.moveWindowToAsync((screen.width - mainWidth) / 2, (screen.height - mainHeight) / 2)
23.       }
24.       await win.showWindow() // 展示窗口
25.       win.setUIContent(url) // 设置地址
26.       this.winNames.push(name)
27.       return name  // showAd方法返回了一个name可以接受存下来，用于关闭广告
28.     }
29.     return ""
30.   }
32.   // 关闭广告
33.   async closeAd(name?: string) {  // 传入刚才存的name关闭具体小窗，不穿则关闭所有小窗
34.     if (name) {
35.       window.findWindow(name).destroyWindow()
36.       this.winNames = this.winNames.filter(item => item !== name) //清空数组内容
37.     } else {
38.       // 不传就认为 想关闭所有
39.       let index = 0
40.       while (index < this.winNames.length) {
41.         await window.findWindow(this.winNames[index]).destroyWindow()
42.         index++
43.       }
44.       this.winNames = [] // 清空数组
45.     }
47.   }
48. }
50. export const adManger = new AdManager()

复制代码

在EntryAbility.ets中，判断是否需要广告，然后打开小窗口。在别的地方使用也可。

1. // 3.使用封装window窗口广告模式
2. // 用这种方式就在 'pages/Start/Start' 中将关闭广告的方法改为 3：adManger.closeAd()
3.     if(ad.showAd){
4.       adManger.context = this.context
5.       adManger.showAd('pages/Start/Start', 320, 240)  // 设置小窗宽高
6.       // 如果你在这里接收了一个name，那么也要存起来，在关闭时使用。
7.       // 不过因为暂时只打开了一个小窗，不存关闭所有也是相同的效果
8.     }

复制代码

在广告页Start中修改关闭方法toMain()

1. toMain() {
2.    // 3.使用封装window窗口广告模式
3.     clearInterval(this.timer) // 先清理一下定时器
4.     adManger.closeAd() //这里如果不传入name就会关闭所有的小窗
5. }

复制代码

方式四：采用与页面解耦的模式实现广告

这种方式相当于弹出一个雷同消息提示的弹框(dialog)，也是通过封装类导出实例，实现打开和关闭广告的方法。
这个种没有实现倒计时，需要用户手动去点击关闭按钮或者使用返回键关闭广告。
但是这种方式需要给广告类再增加一个dialogName属性，当然叫什么无所谓，就是后面用于关闭弹窗。
这种方式用的不是Start页面，而是自定义的弹框builder，所以不用去Start中修改关闭方式

 advert.ets

1. export class AdvertClass {
2.   showAd: boolean = false // 是否展示广告
3.   isFull: boolean = true // 是否全屏
4.   adTime: number = 5 // 倒计时数据
5.   adUrl?: string = "" // 要跳转的连接
6.   adImg?: ResourceStr = "" // 图片连接
7.   dialogName?: string = "" // 新增的name属性
8. }

复制代码

封装ad_manager_final工具
这里由于使用的不是Start页面，所以不用去Start做相应的关闭逻辑
utils/ad_manager_final.ets

2. import { ComponentContent, promptAction, window } from '@kit.ArkUI'
3. import { util } from '@kit.ArkTS'
4. import { AdvertClass } from 'basic'
6. // 展示广告的结构最重要写的代码
7. @Builder
8. function AdBuilder(ad: AdvertClass) {
9.   Column() {
10.     Image(ad.adImg)
11.       .width("100%")
12.       .height("100%")
13.       .objectFit(ImageFit.Cover)
14.       .borderRadius(10)
16.     Row() {
17.       Image($r("app.media.ic_btn_close"))
18.         .width(14)
19.         .aspectRatio(1)
20.     }
21.     .position({  // 不加定位会看不到关闭按钮
22.       right: 20,
23.       top: 20
24.     })
25.     .width(30)
26.     .aspectRatio(1)
27.     .justifyContent(FlexAlign.Center)
28.     .borderRadius(15)
29.     .border({
30.       color: '#ff343232',
31.       width: 2
32.     })
33.     .margin({
34.       top: 40
35.     })
36.     .onClick(() => {
37.       if (ad.dialogName) {
38.         // 点击关闭的逻辑在这里
39.         adManagerFinal.closeAd(ad.dialogName) //  ? name从哪里进来
40.       }
42.     })
44.   }
45.   .width(ad.isFull ? "100%" : "80%")
46.   .height(ad.isFull ? "100%" : "50%")
47. }
49. export class AdManagerFinal {
50.   context?: Context
51.   // 所有的弹窗都放到这个map中 通过name来标识
52.   private map: Map<string, ComponentContent<AdvertClass>> = new Map()
54.   // 实际上需要广告
55.   async showAd(ad: AdvertClass) {
56.     // 按照文档实现
57.     // UIContext上下文必须得等到页面初始化之后才可以进行获取
58.     // 生成一个name
59.     let name = `dialog_${util.generateRandomUUID()}`
60.     // 通过当前的主窗口来获取
61.     const mainWin = await window.getLastWindow(this.context || getContext())
62.     let uiContext = mainWin.getUIContext() // 拿到UIContext
63.     let promptAction = uiContext.getPromptAction();
64.     ad.dialogName = name // 目的是将dialog的弹窗名称传递到builder中
65.     let contentNode = new ComponentContent(uiContext, wrapBuilder(AdBuilder), ad);
66.     let options: promptAction.BaseDialogOptions = {
67.       alignment: DialogAlignment.Center,
68.       autoCancel: false
69.     };
70.     this.map.set(name, contentNode) // 将key/value写入到map中
71.     promptAction.openCustomDialog(contentNode, options);
74.     // 一般半屏广告 是得用户手动点击才能关闭的 一般不会自动关闭
75.     // setTimeout(() => {
76.     //   promptAction.closeCustomDialog(contentNode)
77.     // }, 2000)
80.   }
82.   async closeAd(name: string) {
83.     if (name) {
84.       const mainWin = await window.getLastWindow(this.context || getContext())
85.       let uiContext = mainWin.getUIContext() // 拿到UIContext
86.       let promptAction = uiContext.getPromptAction();
87.       promptAction.closeCustomDialog(this.map.get(name))
88.       // 清理map
89.       this.map.delete(name) // 删除已经关闭的弹窗
90.     }
91.   }
92. }
94. export const adManagerFinal = new AdManagerFinal()

复制代码

在EntryAbility.ets中，判断是否需要广告，打开广告。在别的地方使用也可。

1. // 4.采用与页面解耦的模式实现广告
2.     // 这种模式是单独打开一个全屏模态框，而不是打开 'pages/Start/Start' 页面，关闭按钮也在 'pages/Start/Start' 页面中
3.     if (ad.showAd) {
4.       adManagerFinal.context = this.context
5.       adManagerFinal.showAd(ad) // 展示广告
6.     }

复制代码

这种方式是单独拉起一个雷同dialog弹框，所以样式是重新定义的，不需要去Start页面修改toMain()方法
总结：

• 四种方式各有不同，需要在不同业务场景下公道选择。
  
• 第一种和第二种方式更得当在应用刚打开时的广告展示
  
• 第三种和第四种由于是封装导出的实例，更得当在全局使用。
  
• 前三种都是使用了Start页面，第四种是雷同dialog弹框，他们的关闭方式各不相同。
  

附：完备的EntryAbility.ets和Start.ets
EntryAbility种的1、2、3分别对应Start中toMain()的1、2、3方法
EntryAbility.ets

1. import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';import { hilog } from '@kit.PerformanceAnalysisKit';import { window } from '@kit.ArkUI';import { AdvertClass, userSetting } from 'basic';import { BusinessError } from '@kit.BasicServicesKit';import { adManagerFinal, adManger } from '../utils';const DOMAIN = 0x0000;export default class EntryAbility extends UIAbility {  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');  }  onDestroy(): void {    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');  }  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {    // Main window is created, set main page for this ability    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');    // 冒充向云端获取广告数据的请求    const ad = await new Promise<AdvertClass>((resolve, reject) => {      setTimeout(() => {        resolve({          showAd: true,          isFull: true,          adTime: 3,          adImg: $r("app.media.start")        })      }, 500)    })    userSetting.setUserAd(ad); // 云端的广告设置到本地    // 2. 略微有点意思的模式：创建二级窗口，并展示广告    // 用这种方式就在 'pages/Start/Start' 中将关闭广告的方法改为 2    // if (ad.showAd) {    //   const win = await windowStage.createSubWindow("ad_win") // 二级窗口的实际对象    //   await win.showWindow() // 展示二级窗口    //   win.setUIContent("pages/Start/Start")    // }    // //1. 判断是否需要展示广告    // const path = ad.showAd ? 'pages/Start/Start' : 'pages/Index'    // 根据抽取的路径加载对应path, 假如要用这种模式，将默认路径 'pages/Index' 替换为path    // 使用这种只实用于刚打开应用时，由于他的关闭方式其实是直接跳转到首页（固定的）    windowStage.loadContent('pages/Index', (err) => {      if (err.code) {        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));        return;      }            // 初始化广告仓库    userSetting.initUserSetting()      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');    });    // 3.使用封装window窗口广告模式    // 用这种方式就在 'pages/Start/Start' 中将关闭广告的方法改为 3：adManger.closeAd()    // if(ad.showAd){    //   adManger.context = this.context    //   adManger.showAd('pages/Start/Start', 320, 240)    // }    // 4.采用与页面解耦的模式实现广告
2.     // 这种模式是单独打开一个全屏模态框，而不是打开 'pages/Start/Start' 页面，关闭按钮也在 'pages/Start/Start' 页面中
3.     if (ad.showAd) {
4.       adManagerFinal.context = this.context
5.       adManagerFinal.showAd(ad) // 展示广告
6.     }  }  onWindowStageDestroy(): void {    // Main window is destroyed, release UI related resources    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');  }  onForeground(): void {    // Ability has brought to foreground    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');  }  onBackground(): void {    // Ability has back to background    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');  }}

复制代码

 Start.ets

1. import { AdvertClass, userSetting } from 'basic'
2. import { router, window } from '@kit.ArkUI'
3. import { adManagerFinal, adManger } from '../../utils'
5. @Entry
6. @Component
7. struct Start {
8.   // 需要广告对象
9.   @State
10.   ad: AdvertClass = new AdvertClass()
11.   timer: number = -1 // 用来记录定时器的标记
13.   // @State
14.   // ad: Partial<AdvertClass> = {}
15.   aboutToAppear(): void {
16.     console.log('123123123')
17.     // 获取首选项的广告数据给到ad
18.     this.getAdInfo()
19.   }
21.   getAdInfo() {
22.     // 首选项的读取
23.     this.ad = userSetting.getUserAd()!
24.     // 开启倒计时了
25.     if (this.ad.showAd) {
26.       // 如果真的展示广告要开始倒计时
27.       this.timer = setInterval(() => {
28.         if (this.ad.adTime === 0) {
29.           clearInterval(this.timer)
30.           this.toMain()
31.           return // return一定要写
32.         }
33.         this.ad.adTime--
34.       }, 1000)
35.     }
36.   }
37.   closeWin () {
38.     window.findWindow("ad_win").destroyWindow()
39.   }
40.   // 去主页的方法
41.   toMain() {
42.     // 1. 方式一打开广告，关闭是直接跳转到主页
43.     // router.replaceUrl({
44.     //   url: 'pages/Index'
45.     // })
46.     // 2.方式二：使用子窗口模式关闭广告
47.     // this.closeWin()
48.     // 3.方式三：使用封装window窗口广告模式
49.     // clearInterval(this.timer) // 先清理一下定时器
50.     // adManger.closeAd()
51.   }
53.   aboutToDisappear(): void {
54.     clearInterval(this.timer)
55.   }
57.   build() {
58.     RelativeContainer() {
59.       if (this.ad.showAd) {
60.         Image(this.ad.adImg)
61.           .width("100%")
62.           .height("100%")
63.           .objectFit(ImageFit.Cover)
64.         Text(`${this.ad.adTime}秒跳过`)
65.           .padding({
66.             left: 10,
67.             right: 10
68.           })
69.           .alignRules({
70.             right: {
71.               anchor: '__container__',
72.               align: HorizontalAlign.End
73.             },
74.             top: {
75.               anchor: '__container__',
76.               align: VerticalAlign.Top
77.             }
78.           })
79.           .borderRadius(15)
80.           .height(30)
81.           .fontSize(14)
82.           .backgroundColor($r("app.color.background_page"))
83.           .margin({
84.             right: 20,
85.             top: 20
86.           })
87.           .onClick(() => {
88.             // 此时跳过广告
89.             // 跳转到主页
90.             this.toMain()
91.           })
92.       }
94.     }
95.     .height('100%')
96.     .width('100%')
97.   }
98. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。