微信小程序激励式视频广告组件使用详解


Posted in Javascript onDecember 06, 2019

微信小程序搜索:短视频去水印解析

目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为:

1. Banner

2. 激励式视频

3. 插屏

Banner广告很简单,插入代码就可以显示

这里介绍下激励式视频广告实现(观看完整广告奖励积分):

//视频广告
let videoAd = null;
//视频广告拉取状态
let videoAdPushStatus = false;
 
Page({
 data: {
  //积分总数
  creditsAmountSum: 100
 },
 onLoad(options) {
  let that = this;
 
  that.videoAdShowSetting();
 },
 onShow() {
 },
 videoAdShowSetting: function() {
  var that = this;
  if (wx.createRewardedVideoAd) {
   videoAd = wx.createRewardedVideoAd({
    adUnitId: '自己申请的广告ID'
   })
   videoAd.onLoad(() => {
    //设置广告拉取成功
    videoAdPushStatus = true;
   });
   videoAd.onClose((status) => {
    if (status && status.isEnded || status === undefined) {
     //正常播放结束,可以下发奖励
     that.addUserCredits();
    } else {
     //不下发奖励
     wx.showModal({
      content: '广告未播放完成,无法获取积分',
      showCancel: false
     })
    }
   });
   videoAd.onError(() => {
    that.showToast('获取积分异常,请稍后重试');
   });
  }
 },
 //显示广告
 bindAddCredits: function() {
  let that = this;
  that.showVideoAd();
 },
 //视频广告
 showVideoAd: function() {
  let that = this;
  videoAd.load()
   .then(() => {
    //重置视频广告拉取状态
    videoAdPushStatus = false;
    videoAd.show();
   })
   .catch(err => {
    that.showToast('加载异常,请稍后重试...');
   });
 },
 addUserCredits: function() {
  let that = this;
 
  that.setData({
   creditsAmountSum: 10,
  });
  that.showSuccessToast('已获取积分+10');
 },
 showSuccessToast(title) {
  wx.showToast({
   title: title,
   icon: 'success',
   duration: 3000
  })
 },
 showToast(title) {
  wx.showToast({
   title: title,
   icon: 'none',
   duration: 2000
  })
 }
});

小程序体验:

微信小程序激励式视频广告组件使用详解

总结

以上所述是小编给大家介绍的微信小程序激励式视频广告组件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 #Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 #Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 #Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
原生js检测页面加载完毕的实例
2018/09/11 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python numpy 显示图像阵列的实例
2018/07/02 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
土木工程师岗位职责
2013/11/24 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
学生打架检讨书
2014/02/14 职场文书
买房协议书
2014/04/11 职场文书
初二学习计划书范文
2014/04/27 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
现货白银电话营销话术
2015/05/29 职场文书
文艺部部长竞选稿
2015/11/21 职场文书