QQ微信小程序添加插屏广告完整教程

做QQ微信小程序的大多数都是以流量主为主要收入，而插屏广告又是广告中收益较高的一个，那么现在给大家写一个QQ微信小程序添加插屏广告完整教程。

给interstitialAd赋值

代码如下：

var interstitialAd = null;

上面的代码，写在页面的js文件最上方就行了。

在onLoad事件中加载广告

代码如下：

 onLoad() {
    if (wx.createInterstitialAd) {
      interstitialAd = wx.createInterstitialAd({
       adUnitId: 'xxxx'  //这里是广告id
 })
      interstitialAd.onLoad(() => {
        console.log('onLoad event emit')
      })
      interstitialAd.onError((err) => {
        console.log('onError event emit', err)
      })
      interstitialAd.onClose((res) => {
        console.log('onClose event emit', res)
      })
    }
  },

onload事件是页面首次加载函数，这样在小程序首次加载中，插屏广告就可以加载插屏广告了，然后就是展示代码。

广告的展示方式一

如果你只是想页面出现的时候就现在，那么直接卸载onshow里面就可以了，代码如下：

onShow: function () {
  // 显示插屏广告
  if (interstitialAd) {
    interstitialAd.show().catch((err) => {
      console.error(err)
    })
  }
},

如果你想要自定义显示方式，可以将上述代码封装成一个函数，然后在需要的地方直接调用就可以了。代码如下：

 chaPing: function () {
    if (interstitialAd) {
            interstitialAd.show().catch((err) => {
              console.error(err)
            })
          }
  }

这里以按钮的点击为例，只需要在按钮的点击事件绑定上这个函数就可以了。如下：

<button bindtap="chaPing">点击演示</button>

如果还在其他条件下展示，只需要通过this.chaPing()调用就可以了，很简单，和激励广告差不多，激励广告的接入方法可以看下面的文章。

插屏广告的注意事项

• 广告还没加载完成，建议onLoad之后再调用show方法！
• 广告加载需要时间，很有可能导致第一次进入页面不显示广告，官方也不建议第一次进入就显示广告！
• 小程序启动一定时间内不允许展示插屏广告
• 这个就是字面意思，我在测试的时候通过等待了一段时间之后再次调用广告就可以成功展示了
• 距离小程序插屏广告上次播放时间间隔不足，不允许展示插屏广告
• 两次广告展示之间需要有一段时间的间隔，我查了文档，没有明确说明，其实这样也很好的提高了用户的体验感，打开一个页面一个广告确实挺烦人。

有个案例

下载地址：插屏广告案例

本章首发于安好屋，现转入安好成功屋。