HarmonyOS鸿蒙Next中【快应用】原生广告下载状态监听案例

HarmonyOS鸿蒙Next中【快应用】原生广告下载状态监听案例 问题背景： 快应用中下载类原生广告监听下载状态变化接口调用没生效，在上报点击接口里触发下载监听后仅第一次返回状态，之后就不返回了，该如何处理？

问题分析： 快应用在1100版本新增了一个ad-button组件，废弃了原先的原生广告的下载类接口，改用ad-button自带的下载功能。因而在点击下载的时候开发者不知道该在何时去调用监听接口，往往都会在在nativeAd.reportAdClick()和nativeAd.reportAdShow()中调用的下载监听，这就导致出现此类似情况的时候。

解决方案： ad-button在点击的时候就会跳转到广告页面并开启广告下载的，同时ab-button也是支持onclick点击事件的，可以把下载监听接口放到ad-button的点击事件中去。

代码：

<stack class="stackstyle" onclick="reportNativeClick()">
  <image if="native.isShowImg" class="img" src="{{native.adImgSrc}}">
  <ad-button class="adbtn" onclick="startButton()" valuetype="0" adunitid="{{native.adUnitId}}" adid="{{native.adData.adId}}">
</stack>

startButton(event) {
  console.error('start download result is = ', event.resultCode)
  nativeAd.onStatusChanged((data) => {
    console.log('onStatusChanged data = ', data)
    const progress = nativeAd.getDownloadProgress({
      adId: this.native.adData.adId
    })
    console.log('getDownloadProgress progress = ' + progress);
    const status = nativeAd.getAppStatus({
      adId: this.native.adData.adId
    })
    console.log('getAppStatus status = ' + status);
  })
}

截图：

Demo：

<template>
  <div class="item-container">
    <text class="alert">This is native ad demo</text>
    <div if="native.isShow" class="container">
      <text style="margin-bottom: 8px">ad title :{{native.adData.title}}</text>
      <video id="video" if="native.isShowVideo" src="{{native.adVideoSrc}}" autoplay onclick="reportNativeClick()" class="ad-video">
      </video>
      <stack class="stackstyle" onclick="reportNativeClick()">
        <image if="native.isShowImg" class="img" src="{{native.adImgSrc}}">
        </image>
        <ad-button class="adbtn" onclick="startButton()" valuetype="0" adunitid="{{native.adUnitId}}" adid="{{native.adData.adId}}">
        </ad-button>
      </stack>
      <div style="flex-direction: row; width: 100%">
        <text style="width: 100%">ad source:{{native.adData.source}}</text>
        <image class="closeImg" src="/Common/close.png" onclick="closeAd">
        </image>
      </div>
    </div>
    <text if="native.isShowData">{{ native.adData }}</text>
    <text if="native.errStr">{{ native.errStr }}</text>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    margin-top: 20px;
    width: 100%;
    margin-bottom: 50px;
  }
  .stackstyle {
    width: 100%;
    height: 300px;
  }
  .img {
    width: 100%;
    resize-mode: contain;
  }
  .closeImg {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .alert {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .item-container {
    margin-top: 50px;
    padding: 20px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    align-content: center;
  }
  .ad-video {
    object-fit: contain;
    width: 100%;
    height: 415px;
  }
  .btn {
    height: 80px;
    width: 60%;
    background-color: #00bfff;
    color: #ffffff;
    border-radius: 20px;
    margin-bottom: 20px;
  }
  .btn:active {
    background-color: #058fbd;
  }
  .adbtn {
    width: 200px;
    height: 50px;
    color: #ffffff;
    background-color: #00bfff;
    border-radius: 8px;
    position: absolute;
    align-self: flex-end;
    bottom: 20px;
    right: 20px;
  }
  .adbtn:active {
    background-color: #058fbd;
  }
</style>

<script>
  import ad from "@service.ad"
  import prompt from "@system.prompt"
  let nativeAd;
  export default {
    data: {
      componentName: "ad",
      provider: "",
      native: {
        adUnitId: "testb65czjivt9",
        isShow: false,
        adData: {},
        isShowImg: true,
        isShowVideo: true,
        isShowData: true,
        errStr: "",
        btnTxt: "",
        adImgSrc: "https://cs02-pps-drcn.dbankcdn.com/cc/creative/upload/20191226/b750592e-04be-4132-9971-52494b1e5b43.jpg",
        adVideoSrc: ""
      }
    },
    // 其他代码省略...
  };
</script>