小程序通过广告组件进行赚钱（流量主）--小程序走过的坑（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 广告

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

广告尺寸设置

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

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

<view class="adContainer"><ad unit-id="xxxx"></ad></view>

广告事件监听

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

<view class="adContainer"><adunit-id="xxxx"bindload="adLoad"binderror="adError"bindclose="adClose"></ad>
</view>

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('插屏 广告关闭')
})