0 0 0

Uniapp简单封装的激励广告和插屏广告

admin
2月前 251

在 Uniapp 中,你可以通过封装激励广告和插屏广告来简化它们的使用。以下是一个简单的封装示例,针对微信小程序平台的 wx.createRewardedVideoAd 和 wx.createInterstitialAd API。

激励广告封装:

// util/rewardedAd.js
export default class RewardedAd {
  constructor(adUnitId) {
    this.adUnitId = adUnitId;
    this.rewardedVideoAd = null;
    this.initAd();
  }

  initAd() {
    if (wx.createRewardedVideoAd) {
      this.rewardedVideoAd = wx.createRewardedVideoAd({
        adUnitId: this.adUnitId
      });

      this.rewardedVideoAd.onLoad(() => {
        console.log('激励视频广告加载成功');
      });

      this.rewardedVideoAd.onError(err => {
        console.error('激励视频广告加载失败', err);
      });

      this.rewardedVideoAd.onClose(res => {
        if (res && res.isEnded) {
          console.log('用户完整观看了广告');
          if (this.onReward) this.onReward();
        } else {
          console.log('用户中途退出了广告');
        }
      });
    } else {
      console.warn('当前环境不支持激励视频广告');
    }
  }

  showAd() {
    if (this.rewardedVideoAd) {
      this.rewardedVideoAd.show().catch(() => {
        // 广告加载失败时重新加载
        this.rewardedVideoAd.load().then(() => this.rewardedVideoAd.show());
      });
    }
  }

  onReward(callback) {
    this.onReward = callback;
  }
}

使用示例:

// 在某个页面中
import RewardedAd from '@/util/rewardedAd';

const ad = new RewardedAd('your-ad-unit-id');
ad.onReward(() => {
  // 用户观看广告后获得奖励
  console.log('用户获得奖励');
});

// 显示广告
ad.showAd();

插屏广告封装:

// util/interstitialAd.js
export default class InterstitialAd {
  constructor(adUnitId) {
    this.adUnitId = adUnitId;
    this.interstitialAd = null;
    this.initAd();
  }

  initAd() {
    if (wx.createInterstitialAd) {
      this.interstitialAd = wx.createInterstitialAd({
        adUnitId: this.adUnitId
      });

      this.interstitialAd.onLoad(() => {
        console.log('插屏广告加载成功');
      });

      this.interstitialAd.onError(err => {
        console.error('插屏广告加载失败', err);
      });

      this.interstitialAd.onClose(() => {
        console.log('插屏广告关闭');
      });
    } else {
      console.warn('当前环境不支持插屏广告');
    }
  }

  showAd() {
    if (this.interstitialAd) {
      this.interstitialAd.show().catch(() => {
        // 广告加载失败时重新加载
        this.interstitialAd.load().then(() => this.interstitialAd.show());
      });
    }
  }
}

使用示例:

// 在某个页面中
import InterstitialAd from '@/util/interstitialAd';

const ad = new InterstitialAd('your-ad-unit-id');

// 显示广告
ad.showAd();

总结
1、激励广告:RewardedAd 类封装了激励广告的初始化、显示和奖励回调。
2、插屏广告:InterstitialAd 类封装了插屏广告的初始化和显示。

这两个类分别处理广告的加载、显示和相关事件,简化了广告的使用流程。只需提供广告单元 ID 并调用 showAd 方法即可显示广告。

最新回复 (0)

    暂无评论

请先登录后发表评论!

返回
请先登录后发表评论!