微信小程序添加插屏广告

目录

微信小程序创建项目配置底部导航栏
微信小程序滚动播放内容
微信小程序功能中心模块开发
微信小程序个人中心页面开发
微信小程序获取电话号码
微信小程序显示列表数据
微信小程序显示分页列表
微信小程序添加插屏广告
微信小程序添加激励式广告

最终效果可扫码查看

遇到问题可通过公众号留言反馈

概述

如果小程序用户数大于一千，可以申请流量主，则能够添加广告内容。
插屏广告的微信说明为

// 在页面中定义插屏广告
let interstitialAd = null

// 在页面onLoad回调事件中创建插屏广告实例
if (wx.createInterstitialAd) {
  interstitialAd = wx.createInterstitialAd({
    adUnitId: 'adunit-a4e30ba8401134fb'
  })
  interstitialAd.onLoad(() => {})
  interstitialAd.onError((err) => {})
  interstitialAd.onClose(() => {})
}

// 在适合的场景显示插屏广告
if (interstitialAd) {
  interstitialAd.show().catch((err) => {
    console.error(err)
  })
}

开发

按照微信的说明直接添加三部分代码即可直接实现，但是开发者工具有时候是不显示插屏广告的，需要在真机上查看。
第一部分，直接写到js文件的第一行。
第二部分，写到js文件的onLoad方法中。
第三部分，测试写到了onShow方法中，这样每次进入页面就都会显示广告。

代码使用已经开发好的更多功能页面，在此基础上进行修改。之前的介绍为https://blog.csdn.net/m0_58095675/article/details/121073241

只修改了js文件，其他文件无变化

let interstitialAd = null
Page({
  data: {
    list3:[],
    list4:[],
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: false,
    vertical: true,
    autoplay: true,
    circular: true,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  },
  onLoad: function () {
    if (wx.createInterstitialAd) {
      interstitialAd = wx.createInterstitialAd({
        adUnitId: 'adunit-a4e30ba8401134fb'
      })
      interstitialAd.onLoad(() => {console.log('插屏 广告加载成功')})
      interstitialAd.onError((err) => {})
      interstitialAd.onClose(() => {console.log('插屏 广告关闭')})
    }

    var that=this;
    wx.request({
      url: 'http://yr.lootaa.com/ship/time/todaySave',
      success (res) { 
        that.setData({
          list3: res.data.data.data
        })
        console.log(res.data.data.data)
      }
    })
    
    wx.request({
      url: 'http://yr.lootaa.com/time/channel/lately',
      success (res) {
        that.setData({
          list4: res.data.data
        })
        console.log(res.data.data)
      }
    })
  },

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

})