HarmonyOS NEXT应用开发指南：开屏广告的使用

在开发HarmonyOS NEXT应用时，开屏广告是一个常见的功能模块。尽管它相对简单，但对初次接触的开发者来说，可能还是感到有些陌生。主要原因是它需要新增几个跳转页面，在一个页面中完成广告的请求，然后路由到另外一个页面来展示半屏或全屏广告。

今天，我们将详细讲解如何在HarmonyOS NEXT中实现这一功能，特别是针对全屏广告的展示以及如何在广告关闭后跳转到应用的首页（Index页面）。

1. 新增页面

为了实现开屏广告的功能，我们需要在应用中新增两个页面：StartPage和SplashHalfScreenAdPage。StartPage主要用于请求和展示广告，而SplashHalfScreenAdPage则用于展示半屏广告，这里我们重点讲解全屏广告的展示。

2. 请求和展示全屏广告

首先，我们需要在StartPage中完成广告的请求。可以使用HarmonyOS提供的广告SDK来实现这一功能。在广告请求成功之后，我们将通过router路由跳转到一个专门用于展示全屏广告的页面。

// StartPage.ets
import router from '@ohos.router';

@Entry
@Component
struct StartPage {
  build() {
    Column() {
      // 页面内容，可以是空白或者加载动画
      Text('正在加载广告...')
        .fontSize(20)
        .margin({ top: 200 })
    }
    .onInit(() => {
      // 请求广告的逻辑
      requestFullScreenAd();
    })
  }

  requestFullScreenAd() {
    // 假设requestAd是一个请求广告的方法
    requestAd()
      .then(() => {
        // 广告请求成功，跳转到全屏广告展示页面
        router.push({
          url: '/pages/SplashFullScreenAdPage',
        });
      })
      .catch((error) => {
        console.error('请求广告失败: ' + error);
        // 广告请求失败，直接跳转到首页
        router.push({
          url: '/pages/Index',
        });
      });
  }
}

3. 展示全屏广告并跳转到首页

在SplashFullScreenAdPage中，我们将展示全屏广告，并监听广告关闭事件。当用户关闭广告时，我们将在ad_close事件中使用router路由跳转到应用的Index页面，从而完成整个开屏广告的流程。

// SplashFullScreenAdPage.ets
import router from '@ohos.router';

@Component
struct SplashFullScreenAdPage {
  build() {
    Column() {
      // 这里放置全屏广告组件
      FullScreenAdComponent()
        .onClose(() => {
          // 广告关闭后的跳转逻辑
          router.push({
            url: '/pages/Index',
          });
        })
    }
  }
}

// 假设FullScreenAdComponent是一个用于展示全屏广告的自定义组件
@Component
struct FullScreenAdComponent {
  build() {
    // 全屏广告的实现逻辑
    // ...
  }

  // 模拟广告关闭事件
  onClose() {
    // 广告关闭后的处理逻辑
    // ...
  }
}

总结起来，在HarmonyOS NEXT中实现开屏广告的功能，我们主要需要新增StartPage和SplashFullScreenAdPage两个页面。在StartPage中请求广告，然后根据广告请求的结果路由到SplashFullScreenAdPage或者Index页面。在SplashFullScreenAdPage中展示全屏广告，并通过监听ad_close事件来跳转到Index页面，从而完成整个开屏广告的流程。

上述只是一个大概的流程，详细实现如下：

详细实现

1. 配置文件修改

首先，我们需要在module.json5中增加一些必要的权限，以便应用可以请求广告并获取网络信息。

{
  "requestPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    },
    {
      "name": "ohos.permission.GET_WIFI_INFO"
    },
    {
      "name": "ohos.permission.GET_NETWORK_INFO"
    },
    {
      "name": "ohos.permission.APP_TRACKING_CONSENT",
      "reason": "$string:reason",
      "usedScene": {
        "abilities": [
          "EntryFormAbility"
        ],
        "when": "inuse"
      }
    }
  ]
}

其次，在profile的main_page.json中增加新页面的路径。

{
  "src": [
    "pages/StartPage",
    "pages/SplashHalfScreenAdPage",
    "pages/SplashFullScreenAdPage",
    "pages/Index",
    "pages/WebViewPage"
  ]
}

2. 修改EntryAbility的onWindowStageCreate

在EntryAbility的onWindowStageCreate方法中，我们需要将默认的Index页面替换为StartPage。这样，应用启动时会先加载StartPage来请求广告。

// EntryAbility.ts
import Ability from '@ohos.app.ability.UIAbility';
import router from '@ohos.router';

export default class EntryAbility extends Ability {
  onWindowStageCreate(windowStage) {
    // 加载StartPage而不是默认的Index页面
    windowStage.loadContent('pages/StartPage');
  }
}

3. StartPage实现

在StartPage中，我们需要请求广告并在成功后跳转到SplashFullScreenAdPage。

// StartPage.ets
@Entry
@Component
struct StartPage {
  private context: common.UIAbilityContext  = getContext(this) as common.UIAbilityContext;

  privacyDialogController: CustomDialogController | null = new CustomDialogController({
    builder: PrivacyPolicyDialog({
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() }
    }),
    cancel: this.existApp,
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -30 },
    customStyle: true
  })

  // 组件生命周期
  async aboutToAppear() {
    Log.info('StartPage aboutToAppear');
    let value:Object = await PreferencesUtils.getPreferences(Constant.KEY_IS_FIRST_OPEN);
    if(value === null || value === 'YES'){
      this.privacyDialogController?.open()
    }else{
      adUtils.requestOAIDTrackingConsentPermissions(this.context);
      adUtils.requestAd(this.context,adUtils.splashImageAdReqParams,adUtils.adDisplayOptions,'pages/SplashFullScreenAdPage','pages/Index')
    }
  }
  aboutToDisappear() {
    this.privacyDialogController = null // 将dialogController置空
  }
  onCancel() {
    console.info('Callback onCancel')
    this.context.terminateSelf()
  }
  onAccept() {
    console.info('Callback onAccept')
    PreferencesUtils.savePreferences(Constant.KEY_IS_FIRST_OPEN,"NO");
    router.replaceUrl({
      url: 'pages/Index',
    })
  }
  existApp() {
    console.info('Click the existApp')
    this.context.terminateSelf()
  }

  build() {

  }
}

4. SplashFullScreenAdPage实现

在SplashFullScreenAdPage中，我们将展示全屏广告，并监听广告关闭事件。当用户关闭广告时，我们将在ad_close事件中使用router路由跳转到应用的Index页面，从而完成整个开屏广告的流程。

// SplashFullScreenAdPage.ets
import { Prompt, router } from '@kit.ArkUI';
import { advertising, AdComponent } from '@kit.AdsKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { adUtils } from '../utils/AdUtil';
import { common } from '@kit.AbilityKit';

@Entry
@Component
export struct SplashFullScreenAdPage {
  private ads: Array<advertising.Advertisement> = [];
  private displayOptions?: advertising.AdDisplayOptions;

  private context: common.UIAbilityContext  = getContext(this) as common.UIAbilityContext;

  aboutToAppear() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Start to splashFullScreenAdPage aboutToAppear');
    const params: Record<string, Object> = router.getParams() as Record<string, Object>;
    if (params && params.ads as Array<advertising.Advertisement> &&
      params.displayOptions as advertising.AdDisplayOptions) {
      this.ads = params.ads as Array<advertising.Advertisement>;
      this.displayOptions = params.displayOptions as advertising.AdDisplayOptions;
    } else {
      hilog.info(0x0000, 'testTag', '%{public}s', 'Router params are empty');
    }
  }

  build() {
    Column() {
      AdComponent({
        ads: this.ads, 
        displayOptions: this.displayOptions,
        interactionListener: {
          onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
            switch (status) {
              case AdStatus.AD_OPEN:
                hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdOpen');
                Prompt.showToast({
                  message: 'splash ad open',
                  duration: 1000
                });
                break;
              case AdStatus.AD_CLICKED:
                hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdClick');
                Prompt.showToast({
                  message: 'splash ad click',
                  duration: 1000
                });
                break;
              case AdStatus.AD_CLOSED:
                hilog.info(0x0000, 'testTag', '%{public}s', 'Status is onAdClose');
                // 跳转到Index页面
                router.replaceUrl({
                  url: '/pages/Index',
                });
                break;
            }
          }
        }
      })
        .width('100%')
        .height('100%')

      Column({}) {
        Row() {
          Image($r('app.media.app_icon')).width(24).height(24).margin({ right: 8 })
          Text($r('app.string.app_name')).fontColor('#1A1A1A')
        }.margin({ bottom: 8 })

        Column() {
          Text($r('app.string.copyright')).fontColor('#1A1A1A').fontSize(9).height(15)
        }
      }.width('100%').height('100%').margin({ bottom: 10 })
    }
  }
}

export enum AdStatus {
  AD_OPEN = 'onAdOpen',
  AD_CLICKED = 'onAdClick',
  AD_CLOSED = 'onAdClose'
}

总结起来，在HarmonyOS NEXT中实现开屏广告的功能，我们主要需要新增StartPage和SplashFullScreenAdPage两个页面。在EntryAbility的onWindowStageCreate方法中，替换原来的默认Index加载页面为StartPage。在StartPage中请求广告，然后根据广告请求的结果路由到SplashFullScreenAdPage或者Index页面。在SplashFullScreenAdPage中展示全屏广告，并通过监听ad_close事件来跳转到Index页面，从而完成整个开屏广告的流程。

希望以上内容能够帮助你更好地理解和实现HarmonyOS NEXT应用中的开屏广告功能。

​ 作者：csdn猫哥 blog.csdn.net/qq8864，转载请注明出处。

团队：坚果派

团队介绍：坚果派由坚果等人创建，团队拥有12个华为HDE带领热爱HarmonyOS/OpenHarmony的开发者，以及若干其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉。团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙原生应用，三方库60+，欢迎交流。

​