uniapp封装的激励广告和插屏广告以及banner广告

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

今天给大家写一个uniapp简单封装的激励广告和插屏广告的教程，主要的解决的问题就是如果一个小程序页面多且需要调用的广告也比较多，这样会导致出现许多的重复代码，而且使得页面js文件看起来很繁琐，如果可以将其封装，那么只需要使用一行代码就可以实现调用了。

首先新建一个js文件，这里为演示方便取名为Utils.js，最好是在根目录新建一个文件夹然后将他放进去，方便之后的调用。

插屏广告由于没有其他的事件需要调用，相当可以独立运行，所以写起来很方便，所以在这个js文件中写起来其实和页面调用差不多，只是我们将广告id以一个参数的形式传进去，这样之后就可以直接调用了，代码如下：

var interstitialAd = null;
let interstitial = {
  load(id) {
    if (uni.createInterstitialAd) {
      interstitialAd = uni.createInterstitialAd({
        adUnitId: id
      })
      interstitialAd.onLoad(() => {
        console.log('插屏广告加载中')
      })
      interstitialAd.onError((err) => {
        console.log('加载错误', err)
      })
      interstitialAd.onClose((res) => {
        console.log('插屏广告关闭', res)
      })
    }
  },
  show() {
    if (interstitialAd) {
      interstitialAd.show().catch((err) => {
        console.error(err)
      })
    }
  }
}

这里可以看出interstitial对象有两个函数，一个是加载函数，一个是显示函数，然后我们将他们导出就可以了，由于我们还需要将激励广告也封装进去，那么稍后我们再一起导出。

激励广告这里我们需要传递两个参数，一个是广告id，一个是激励广告完成后的奖励事件，代码如下：

let videoAd = null;
let rewarded = {
  load(id, e) {
    if (uni.createRewardedVideoAd) {
      videoAd = uni.createRewardedVideoAd({
        adUnitId: id
      })
      videoAd.onError(err => {})
      videoAd.onClose((status) => {
        if (status && status.isEnded || status === undefined) {
          e()
        } else {}
      })
    }
  },
  show() {
    if (videoAd) {
      videoAd.show().catch(() => {
        // 失败重试
        videoAd.load()
          .then(() => videoAd.show())
          .catch(err => {
            console.log('激励视频 广告显示失败')
          })
      })
    }
  }
​
}

其中e就是传入的奖励事件，如何使用待会给大家讲解，最后我们将这两个封装好的对象导出就可以了，代码如下：

module.exports = {
interstitial,
rewarded
};

注意文件的相对路径不要写错，不过你写错ide也会给你报错的。

插屏广告

在onLoad里面加载插屏广告，展示插屏广告，代码如下：代码如下：

Utils.interstitial.load('你的广告id')
Utils.interstitial.show()

激励广告
在onLoad里面加载激励广告，代码如下：

Utils.rewarded.load('adunit-85e98527c651f48f', () => {
      //这里写你的任意奖励事件
});
Utils.rewarded.show();

视频或banner广告、直接写在页面即可或者使用模板方式引入

<ad unit-id="" ad-type="video" ad-theme="white"></ad>
<ad unit-id="" ad-type="banner" ad-theme="white"></ad>

视频贴片广告、直接写在页面即可或者使用模板方式引入

<video unit-id=""></video>

原生模板广告、直接写在页面即可或者使用模板方式引入

<ad-custom unit-id=""></ad-custom>

以上就是本章的全部内容，更多优质内容请关注公众号：Java程序员客栈。