小程序通过广告组件进行赚钱（流量主）--小程序走过的坑（16）（最新版）

当独立访客大于1000时，小程序就可以在微信公众平台开通流量主功能。无论是个人小程序或者企业小程序都能开通（画重点）；

当你开通完流量主功能（开通时需要填写银行卡等信息）

就可以新建广告组件

目前得广告组件分为Banner、激励式视频、插屏三种广告组件。可根据需求选择，也可同时使用。

将组件代码按提示插入在小程序中，用户点击广告位，你即可拥有微信广告位得收入。

激励视频广告

激励视频广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在普通组件上。

开发者可以调用 wx.createRewardedVideoAd 创建激励视频广告组件。该方法返回的是一个单例，该实例仅对当前页面有效，不允许跨页面使用。

let rewardedVideoAd = null
Page({
  onLoad() {
    if (wx.createRewardedVideoAd) {
      rewardedVideoAd = wx.createRewardedVideoAd({adUnitId: 'xxxx'})
      rewardedVideoAd.onLoad(() => {
        console.log('onLoad event emit')
      })
      rewardedVideoAd.onError((err) => {
        console.log('onError event emit', err)
      })
      rewardedVideoAd.onClose((res) => {
        console.log('onClose event emit', res)
      })
    }
  }
})

Banner 广告

开发者可以使用  组件创建 Banner 广告组件，Banner 广告组件在创建后会自动拉取广告数据并显示。

广告尺寸设置

Banner 广告不允许直接设置样式属性，默认宽度为100%（width: 100%），高度会自动等比例计算，因此开发者可以设置广告外层组件的宽度调整广告的尺寸。 广告外层组件的宽度不允许小于300px，当宽度小于300px时，Banner 广告的宽度会强制调整为300px。

/* 外层组件的宽度可设置成100%或具体数值 */
.adContainer {
  width: 100%;
}

广告事件监听

Banner 广告在创建后会自动拉取广告。开发者可以通过  组件的 onload 和 onerror 事件监听广告拉取成功或失败，可以通过 onclose 事件监听广告被关闭。

Page({
  adLoad() {
    console.log('Banner 广告加载成功')
  },
  adError(err) {
    console.log('Banner 广告加载失败', err)
  },
  adClose() {
    console.log('Banner 广告关闭')
  }
})

插屏广告

插屏广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在普通组件上。

开发者可以调用 wx.createInterstitialAd 创建插屏广告组件。每调用一次该方法，返回的都是一个全新实例，该实例仅对当前页面有效，不允许跨页面使用。

广告创建

插屏广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。开发者可以在小程序页面的 onLoad 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。

let interstitialAd = null
Page({
  onLoad() {
    if (wx.createInterstitialAd) {
      interstitialAd = wx.createInterstitialAd({adUnitId: 'xxxx'})
      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)
      })
    }
  }
})

显示/隐藏

插屏广告组件默认是隐藏的，开发者需要调用 InterstitialAd.show() 进行显示。如果广告拉取失败或触发频率限制，InterstitialAd.show() 方法会返回一个rejected Promise，开发者可自行监听错误信息。常见异常错误参考文档

interstitialAd.show().catch((err) => {
  console.error(err)
})

用户可以主动关闭插屏广告。开发者不可控制插屏广告组件的隐藏。

广告拉取成功与失败

插屏广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告，用户关闭广告后会去拉取下一条广告。

如果拉取成功，通过 InterstitialAd.onLoad() 注册的回调函数会执行，回调函数没有参数传递。

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

如果拉取失败，通过 InterstitialAd.onError() 注册的回调函数会执行，回调函数的参数是一个包含错误信息的对象。常见异常错误参考文档

interstitialAd.onError(err => {
  console.log(err)
})

监听用户关闭广告

如果广告被关闭，通过 InterstitialAd.onClose() 注册的回调函数会执行，回调函数没有参数传递。

interstitialAd.onClose(res => {
  console.log('插屏 广告关闭')
})