精华内容
下载资源
问答
  • 微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。 大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面...
  • 插屏广告微信说明为 // 在页面中定义插屏广告 let interstitialAd = null // 在页面onLoad回调事件中创建插屏广告实例 if (wx.createInterstitialAd) { interstitialAd = wx.createInterstitialAd({ adUnitId: ...

    目录

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

    最终效果可扫码查看
    可查看效果二维码
    遇到问题可通过公众号留言反馈
    留言扫描二维码

    概述

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

    // 在页面中定义插屏广告
    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)
          })
        }
      }
    
    })
    
    展开全文
  • 微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。 大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面...

    微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便。详细可见微信小程序官方文档

    大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面的onload处添加即可。

    let interstitialAd = null;
    if (wx.createInterstitialAd) {
        interstitialAd = wx.createInterstitialAd({
            adUnitId: 'adunit-ID'
        })
    }
    if(interstitialAd) {
        interstitialAd.show().catch((err) => {
            console.error(err);
        })
    }
    

    嵌入广告非常简单,毕竟微信已经将所有的接口写好了,开发者仅需调用即可。
    主要的功能点是设置一个插屏广告一天只显示一次,而微信并没有提供这方面的api,秉持前端能完成的就不要麻烦后端,便想到直接使用缓存存储当期日期,用户打开页面的时候获取上次缓存的日期查看是否相同即可。

    //这里使用的是mpVue框架,写在mounted里。
    let nowday = new Date().getFullYear().toString() + (new Date().getMonth() + 1).toString() + new Date().getDate().toString() ;
    
    //获取上次打开页面时间
    try {
        let lastDay = wx.getStorageSync('day');
        if(lastDay) {
            console.log('lastday', lastDay);
            console.log('nowday', nowday)
            if(lastDay == nowday) {
                this.flag = false;
            } else {
                this.flag = true;
            }  
        }
    } catch (e) {
        //用户首次打开
        this.flag = true;
        console.error(e);
        console.log('true no storage', this.flag)
    }
    
    if(interstitialAd && this.flag) {
        interstitialAd.show().catch((err) => {
            console.error(err);
        })
    }
    interstitialAd.onLoad(() => {
        try {
            wx.setStorageSync('day', nowday);
            console.log('存储时间', nowday);
            } catch (e) { 
            console.log('err', err)
        }
    })
    
    展开全文
  • 1、banner广告 <ad unit-id="{{ adUnitId }}"></ad> 2、视频广告 <ad unit-id="{{ adUnitId }}" ad-type="video" ad-theme="white">... // 实例化插屏广告 createInterstitialAd: function ...

    1、banner广告

    <ad unit-id="{{ adUnitId }}"></ad>
    

    2、视频广告

    <ad unit-id="{{ adUnitId }}" ad-type="video" ad-theme="white"></ad>
    

    3、插屏广告

      // 实例化插屏广告
      createInterstitialAd: function ( adUnitId ) {
        if (interstitialAd != null) return
        if (wx.createInterstitialAd) {
          interstitialAd = wx.createInterstitialAd({ adUnitId: adUnitId })
          interstitialAd.onLoad(() => { console.log('广告加载完成’) })
          interstitialAd.onError((err) => {  console.log('广告加载错误’)  })
          interstitialAd.onClose((res) => {  console.log('关闭广告时触发’)  })
        }
      }
    //创建
    this.createInterstitialAd('插屏广告id' );
    //调用
     interstitialAd.show().catch((err) => {
          console.error(err)
      })
    

    4、激励视频广告(常用于视频观看完成后,下发奖励)

        // 实例化激励视频广告
      createVideoAd: function (adUnitId) {
        var _this = this
        if (rewardedVideoAd != null) return
        if (wx.createRewardedVideoAd) {
          rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: adUnitId })
          rewardedVideoAd.onLoad(() => {})
          rewardedVideoAd.onError((err) => { })
          rewardedVideoAd.onClose((res) => {
            // 用户点击了【关闭广告】按钮
            if (res && res.isEnded) {
              // 正常播放结束,可以下发游戏奖励
              }
            } else {
              // 播放中途退出,不下发游戏奖励
              wx.showToast({
                title: "广告未观看完,无法获得奖励",
                icon: "none",
                duration: 2000
              });
            }
          })
        }
      }
      
      //创建
      this. createVideoAd(' 激励视频广告id ');
      
      // 调用
      rewardedVideoAd.show()
         .catch(() => {
           rewardedVideoAd.load()
             .then(() => rewardedVideoAd.show())
             .catch(err => {
             })
         })
    
    展开全文
  • 小程序添加插屏广告教程

    万次阅读 2019-04-26 15:53:42
    这两天有读者在后台提醒我小程序可以添加插屏广告了,让我出一期教程。最近也在一直忙着毕业论文,抽空看了看小程序插屏广告,插入广告并不难,但却有很多的条件限制。 还不会开通流量主或者不会插入 banner / ...

    这两天有读者在后台提醒我小程序可以添加插屏广告了,让我出一期教程。最近也在一直忙着毕业论文,抽空看了看小程序的插屏广告,插入广告并不难,但却有很多的条件限制。

    还不会开通流量主或者不会插入 banner / 视频广告的先看下面两篇教程吧。

    小程序开通流量主
    小程序插入激励视频广告

    插屏广告

    用户触发小程序中的特定场景时,插屏广告将自动向用户展现,用户可以随时关闭插屏广告。广告触发场景由流量主自定义,广告按曝光计费(CPM)。

    在这里插入图片描述

    官方建议在“有停顿感“的场景展现小程序插屏广告,例如切换 tab、游戏回合结束、流程结束、视频播放停顿等等,同时不建议在一打开小程序或者操作过程中途显示插屏广告。个人认为这个界定有些模糊了,拓展以及想象空间非常非常大。

    在这里插入图片描述

    以上一些定义,各位可自行体会。下面进入正题,就教大家创建以及插入插屏广告。

    创建广告位

    进入小程序的后台,点击流量主菜单,选择广告位管理,点击新建广告位。

    在这里插入图片描述

    现在这里的广告位类型有三个,选择插屏广告,并输入广告位名称,主要用于区分,方便管理,最后点击确定。

    在这里插入图片描述

    创建成功后复制一下你的广告位 ID,并打开开发者工具。

    插入代码

    插屏广告代码调用是 wx.createInterstitialAd 接口。接口返回一个广告对象,该对象仅对单个页面有效,不允许跨页面使用。与激励视频广告不同,多次创建,返回的是多个插屏广告对象。

    下面以切换 tab 场景为例,教大家如何插入插屏广告。

    首先 tabbar 的配置如下:

    "tabBar": {
        "color": "#707070",
        "selectedColor": "#6c63ff",
        "backgroundColor": "#ffffff",
        "list": [
          {
            "pagePath": "pages/home/home",
            "text": "home",
            "iconPath": "images/home.png",
            "selectedIconPath": "images/home-fill.png"
          },
          {
            "pagePath": "pages/bug/bug",
            "text": "bug",
            "iconPath": "images/bug.png",
            "selectedIconPath": "images/bug-fill.png"
          }
        ]
      }
    

    官方不建议一打开小程序就显示广告,因此这里将广告插入在第二个页面中。

    首先初始化插屏广告对象

    // 在页面中定义插屏广告对象
    var interstitialAd = null;
    
    Page({
        ...
    })
    

    由于广告对象仅对单个页面有效,官方建议开发者在页面加载后(onLoad事件)创建一个广告对象,并在该页面的生命周期内重复调用该广告对象。

    onLoad: function (options) {
      // 创建插屏广告实例
      if (wx.createInterstitialAd) {
        interstitialAd = wx.createInterstitialAd({
          adUnitId: 'adunit-你的广告id'
        })
        //捕捉错误
        interstitialAd.onError(err => {
          console.log(err);
        })
      }
    },
    

    由于 tabbar 的 onLoad事件 在整个应用生命周期中只会调用一次,因此这里选择在 onShow 中显示广告。

    onShow: function () {
      // 显示插屏广告
      if (interstitialAd) {
        interstitialAd.show().catch((err) => {
          console.error(err)
        })
      }
    },
    

    目前调试工具无法正常显示视频广告,打开手机调试,插屏广告可以正常显示。

    在这里插入图片描述

    如果视频不显示或者显示异常,可以参考表格中的异常信息代码,找到相应的解决方案。

    在这里插入图片描述

    另外,还有人问到如何实现切回主页面显示广告,这其实并不难,这里提供一个思路:在主页面设置一个布尔常量,在 onShow 函数中通过这个布尔常量来判断当前页面是否为第一次显示即可。代码就不展示了,不会的留言或者私聊问我吧。

    插屏广告限制

    为保证良好的用户体验,插屏广告频率将受到如下限制,因此设计广告触发场景时需要考虑到以下的限制情况。

    1. 用户每次打开小程序后的一段时间内,将不会展现插屏广告。
    2. 两个插屏广告之间将会间隔一段时间。
    3. 一个激励式视频与一个插屏广告之间将会间隔一段时间,展现次序不分先后。

    另外,show方法返回rejected Promise时会有对应的错误码信息。因此,可以通过捕获的异常信息,来判断广告不显示的原因。

    在这里插入图片描述

    这里吐槽一下,这么多限制,感觉也没啥地方可以展示的。

    更多的信息请参考官方小程序插屏广告流量主指引

    上面的完整代码可以在公众号后台回复「插屏广告」获取。


    推荐阅读
    小程序开通流量主
    小程序插入激励视频广告

    在这里插入图片描述

    展开全文
  • 微信小程序——添加广告

    千次阅读 2020-05-28 16:29:47
    微信小程序——添加广告
  • 目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为: 1. Banner 2. 激励式视频 3. 插屏 Banner广告很简单,插入代码就可以显示 这里介绍下激励式视频广告实现(观看完整广告奖励积分): //视频广告 ...
  • 最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 。 激励式视频广告 用户在小程序中主动触发激励式广告,并达成...
  • 2.新增插屏广告(打开首页弹窗显示插屏广告,24小时只会弹出一次) 3.视频广告(首页固定位置显示) 4.新增分享保存海报 5.取消解析次数规则(看完广告24小时内无限制解析) 温馨提示:小程序需要开通流量主(即...
  • 微信小程序之页面打开数量限制 无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的。当点击页面的回退按钮就是把当前页面关闭。 这个过程中会涉及到一个问题,就是打开页面的数量...
  • 有关微信小程序Promise踩的大坑

    千次阅读 2018-04-02 13:10:31
    接触小程序以来一直都是...听说微信小程序支持过一段时间又移除掉了,但是我在小程序中还是依然可以使用不知道什么原因。 首先说一下我的目录结构: 首先我把wx.request在http.js中封装好了 然后又在fm_netw...
  • 每页广告单独设置,高频率的插屏广告(收入超过激励视频),用户观看激励广告,用户解锁观看激励广告,只要你有定位精准的初始量,这个小程序的邀请解锁模式,会为你带来二次流量裂变,只要你的资源有价值,三次裂变...
  • 如果小程序用户数大于一千,可以申请流量主,则能够添加广告内容。 激励式广告微信说明为 // 在页面中定义激励视频广告 let videoAd = null // 在页面onLoad回调事件中创建激励视频广告实例 if (wx....
  • 小程序广告分配常用的有五种,Banner广告、格子广告、视频广告、激励式广告和插屏广告,下面通过案例图片来更直观的了解他们的区别: 1.Banner广告组件 2.格子广告组件 3.视频广告组件 4.激励式广告组件 5.插屏...
  • 微信小程序加入广告

    千次阅读 2020-03-09 20:51:40
    小程序广告样式有六种,分别是 Banner、激励式视频、插屏、视频广告、前贴视频、格子广告微信对加入的广告样式布局等有一定的要求,添加广告要按照小程序规则指引进行添加 ,详情点击【小程序、小应用广告应用...
  • 目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为: 1.Banner 2. 激励式视频 3. 插屏 Banner广告很简单,插入代码就可以显示 这里介绍下激励式视频广告实现(观看完整广告奖励积分): //视频...
  • 首先需要你的小程序流量达到一千人数! 然后点击流量主就可以设置广告了,之后广告会分为几种:最赚钱的是激励广告和插屏广告。 下面是我的小程序 ,不会可以进去了解,联系我。
  • 本文仅供入门学习; 上班经常遇到有些同学启用了...其实微信小程序需注意的就这点,因为很多新手刚接触不懂得去清除,所以经常开到最后弄得手机很卡。 转载于:https://www.cnblogs.com/sujianyin/p/10655669.html
  • uniapp插屏广告文档uni-app官网uni-app:一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/api/a-d/interstitial微信官网插屏广告文档插屏广告 | 微信开放文档微信开发者平台文档...
  • 小程序累计独立访客(UV)1000以上,且无违规记录,即可开通流量主功能。 2)点击“新建广告位”开始创建 输入广告位名称即可,如计划插入多个广告位,需要分别新建。 3)获取广告位代码片段 系统将生成...
  • 微信小程序-广告相关

    2020-11-03 20:26:26
    微信小程序广告分类 近期有一个需求是跟广告相关,趁此机会,对微信广告这里进行了详细的了解。 下面是对广告相关的大概介绍官方文档 Banner广告 微信官方文档也有写: <view class="adContainer"> <ad ...
  • 微信小程序广告全量放开之后,好多小程序的开发者兴奋赶在第一时间给自己的微信小程序加上广告,想到多少个晚上和周末放弃陪妹子,加班加点开发的成果终于要有收入了,甚至幻想因此赚到一桶金,买房买车,早日迎娶白...
  • 微信小程序流量主广告组件有Banner 广告、激励视频广告、插屏广告、小程序视频广告、视频前贴广告、Grid 广告、原生模板广告等。 基础介绍 什么是小程序广告组件?产品形态?有什么特点? ...
  • 手把手教你做短视频去水印微信小程序(6-广告代码) 文章目录手把手教你做短视频去水印微信小程序(6-广告代码)前言一、开通流量主并创建广告位1.1 开通流量主1.2 创建广告位二、使用步骤1.2.读入数据总结 前言 ...
  • 然后就有资格开通流量主给小程序植入广告赚钱了,这是第一天的收益情况: 开通后的界面是这样子的,第二天就会显示第一天的收益情况 第一天收益 数据详细 只是想记录一下,后期更新,有关小程序开发上线过程...
  • 概述 使用之前已经完成的个人中心页,在这个基础上直接修改。...流程分为三步: ...1 小程序登录wx.login获取code(后台使用该code得到session_key openid unionid) 2 获取手机号码 open-type=“getPhoneNumber”
  • 最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 。 激励式视频广告 用户在小程序中主动触发激励式广告,并达成...
  • 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告 最终...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 285
精华内容 114
关键字:

微信小程序插屏广告

微信小程序 订阅