集成广告

当小程序的用户量达到一定数量时，就可以开通流量主。集成小程序广告，就可以获得收益。

为了增加一点收益，用于承担一些我的服务器费用支出。根据我的小程序特点，我集成了 3 类类型的广告。如果你喜欢我的文章，欢迎你浏览小程序观看广告。

1. 封面广告，这个没有技术含量，在小程序后台开通即可。

2. Banner 广告，这个也没有技术含量，在界面中设置时注意和界面的其它元素不冲突，排版协调即可。

3. 激励视频广告，这个有一点技术含量。官方文档中说在 onLoad 方法中加载广告的初始化。我发现这样设置的话，界面会不流畅。特别是多次返回再进入，页面迟滞现象严重。

为了优化，我也想了很多办法。最后的解决方法如下：

  loadAd() {
    const that = this;
    vAd = wx.createRewardedVideoAd({
      adUnitId: 'adunit-2ce6db3cb1e45a86',
    })
    vAd.onLoad(() => {
      hasLoadAd = true
    }),
      vAd.onError((err) => {
        console.error('激励视频广告加载失败,', err)
      }),
      vAd.onClose((res) => {
        if (res && res.isEnded) {
          that.doAdProfit();
        } else {
          wx.showToast({
            title: '没有获得点数哟！',
          })
        }
      })
  },

  playAd() {
    const that = this;
    wx.showLoading({
      title: '加载广告中',
    })
    if (!hasLoadAd) {
      that.loadAd();
    }
    // 用户触发广告后，显示激励视频广告
    if (vAd) {
      vAd.show().then(() => [
        wx.hideLoading()
      ]).catch(() => {
        // 失败重试
        vAd.load()
          .then(() => {
            wx.hideLoading()
            vAd.show()
          })
          .catch(err => {
            wx.hideLoading()
            wx.showToast({
              title: '请重试一次',
            })
            console.error('激励视频 广告显示失败', err)
          })
      })
    } else {
      wx.hideLoading()
      wx.showToast({
        title: '请稍后重试',
      })
    }
  },

进入页面后，不加载广告，只有当用户主动点击广告按钮时，才加载广告。在加载广告的时候，给用户显示 Loading，增加用户的体验。如果已经加载了广告，就直接播放。如果加载广告失败，再重新拉取一次。还报错，就只能显示给用户错误了。

通过上面的方法改进后，发现多次进入页面不会卡顿，发生页面迟滞现象。

小程序开发部分基本就完成了，后续有新的功能或者优化再开新的文章。

感谢您的观看！