前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序添加激励视频广告演示代码详解

小程序添加激励视频广告演示代码详解

作者头像
许坏
发布2019-07-08 19:52:41
4.6K0
发布2019-07-08 19:52:41
举报
文章被收录于专栏:宅机吧
很多朋友反馈激励视频有点不好加,目前全网也没任何人写,故特记此教程。

进入小程序,选择一个号码后连续两次下拉刷新,自动会出现激励视频。

下面直接说教程

首先,先看官方文档说明

代码语言:javascript
复制
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/rewarded-video-ad.html

这里官方没有给任何dome,所以很多对js不熟悉的朋友很迷惑,但是仔细看看官方文档,其实写的很详细了,下面我直接展示我得dome

首先,在需要插入广告的页面定义一下

代码语言:javascript
复制
let rewardedVideoAd = null

然后,我们再加上激励广告设置的所有逻辑

代码语言:javascript
复制
ad_set:function(){
var that =this;
if(wx.createRewardedVideoAd) {
    rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'adunit-aff945372da8bd6a'})
    rewardedVideoAd.onLoad(() => {
console.log('拉取激励广告成功')
    })
    rewardedVideoAd.onError((err) => {
console.log('拉取激励广告失败')
    })
    rewardedVideoAd.onClose((res) => {
if (res && res.isEnded) {
       console.log('激励广告加载完成')
      } else {
console.log('激励广告被强制关闭')
     }
   })
  }
},

以上部分是默认的广告逻辑,我们在页面渲染时就默认加载,所以在onload中调用一下

代码语言:javascript
复制
  onLoad: function (e) {
      this.ad_set();
  },

然后接下来,就是控制广告的展示了

代码语言:javascript
复制
 ad_show:function(){
if (rewardedVideoAd){
     rewardedVideoAd.show(()=> {
      wx.showToast({
title: '看完视频就刷新哟',
icon: 'loading',
duration: 2000
      })
     });
   }
 },

最后在view视图层需要调用的地方添加冒泡事件即可

代码语言:javascript
复制
bindtap="ad_show"

整个功能实现代码既如此,其实官方写的很清楚,如果看不懂,建议多看看js相关教程。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 宅机吧 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档