微信小程序加入广告

小程序的广告样式有六种，分别是 Banner、激励式视频、插屏、视频广告、前贴视频、格子广告。

微信对加入的广告样式布局等有一定的要求，添加广告要按照小程序规则指引进行添加 ，详情点击【小程序、小应用广告应用规范及处罚规则】查看。

小程序广告官方文档：https://ad.weixin.qq.com/guide/1191

加入广告，首先要开通广告功能。开通后就可以在广告管理中新建广告位了。

各种广告的代码实现：

说明： unit-id请替换为自己的。

1、Banner广告页代码，这个比较简单只要加入下面一句话就可以了

2、激励视频广告

.WXML中代码

  打开激励视频

JS中的代码

let videoAd = null
Page({
  onLoad() {
    // 在页面onLoad回调事件中创建激励视频广告实例
    if (wx.createRewardedVideoAd) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId: 'adunit-xxxxx'
      })
      videoAd.onLoad(() => {})
      videoAd.onError((err) => {})
      videoAd.onClose((res) => {})
    }
  },
  openVideo: function(e) {

    if (videoAd) {
      videoAd.show().catch(() => {
        // 失败重试
        videoAd.load()
          .then(() => videoAd.show())
          .catch(err => {
            console.log('激励视频 广告显示失败')
          })
      })
    }

  }
})

3、插屏广告

wxml文件代码：

  我没有点击效果哦



  我不能点击哦



  点击哦，有广告



  我不能点击哦

JS文件代码

// 在页面中定义插屏广告
let interstitialAd = null
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 在页面onLoad回调事件中创建插屏广告实例
    if (wx.createInterstitialAd) {
      interstitialAd = wx.createInterstitialAd({
        adUnitId: 'adunit-xxxxxx'
      })
      interstitialAd.onLoad(() => {})
      interstitialAd.onError((err) => {})
      interstitialAd.onClose(() => {})
    }
  },

  openAd: function(e) {
    // 在适合的场景显示插屏广告
    if (interstitialAd) {
      interstitialAd.show().catch((err) => {
        console.error(err)
      })
    }
  }
})在这里插入代码片

4、打开视频广告

5、打开前贴视频

带广告



同样链接，不带广告

6、打开格子视频