HarmonyOS 鸿蒙Next应用开发：开屏广告的使用指南

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next应用开发：开屏广告的使用指南
<markdown _ngcontent-jif-c147="" class="markdownPreContainer">

在开发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%’)


  <span class="hljs-title class_">Column</span>({}) {
    <span class="hljs-title class_">Row</span>() {
      <span class="hljs-title class_">Image</span>($r(<span class="hljs-string">'app.media.app_icon'</span>)).<span class="hljs-title function_">width</span>(<span class="hljs-number">24</span>).<span class="hljs-title function_">height</span>(<span class="hljs-number">24</span>).<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">right</span>: <span class="hljs-number">8</span> })
      <span class="hljs-title class_">Text</span>($r(<span class="hljs-string">'app.string.app_name'</span>)).<span class="hljs-title function_">fontColor</span>(<span class="hljs-string">'#1A1A1A'</span>)
    }.<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">bottom</span>: <span class="hljs-number">8</span> })

    <span class="hljs-title class_">Column</span>() {
      <span class="hljs-title class_">Text</span>($r(<span class="hljs-string">'app.string.copyright'</span>)).<span class="hljs-title function_">fontColor</span>(<span class="hljs-string">'#1A1A1A'</span>).<span class="hljs-title function_">fontSize</span>(<span class="hljs-number">9</span>).<span class="hljs-title function_">height</span>(<span class="hljs-number">15</span>)
    }
  }.<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>).<span class="hljs-title function_">height</span>(<span class="hljs-string">'100%'</span>).<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">bottom</span>: <span class="hljs-number">10</span> })
}

}
}


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+，欢迎交流。

​

</markdown>

更多关于HarmonyOS 鸿蒙Next应用开发：开屏广告的使用指南的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next应用开发：开屏广告的使用指南的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next应用开发：开屏广告的使用指南

在HarmonyOS鸿蒙Next应用开发中，实现开屏广告功能需遵循以下步骤：

  1. 配置广告服务：首先，在config.json文件中添加广告服务的权限与配置，确保应用有权限展示广告。

  2. 引入广告SDK：下载并集成鸿蒙广告SDK到项目中，这通常涉及将SDK包导入项目并配置依赖。

  3. 创建广告位：在应用的布局文件中定义一个广告位，用于展示开屏广告。使用鸿蒙的布局组件，如DirectionalLayout或StackLayout，并指定广告位的ID。

  4. 加载并展示广告：在应用启动时，通过广告管理API加载开屏广告，并将其展示在之前定义的广告位上。确保在广告加载完成前显示加载指示器，以提升用户体验。

  5. 处理广告事件：监听广告点击、关闭等事件，根据业务需求处理用户交互，如跳转到指定页面或关闭广告。

  6. 优化与测试：在多种设备和网络环境下测试开屏广告功能，确保广告加载迅速、展示稳定，且用户交互流畅。

请注意，实际开发中需根据鸿蒙最新的开发文档与API调整实现细节。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部