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


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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
js中this的用法实例分析
Jan 10 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
JavaScript函数基础详解
Feb 03 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
Vue自定义多选组件使用详解
Sep 08 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-redis中的sort排序函数总结
2015/07/08 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
ES6入门教程之let和const命令详解
2017/05/17 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
python二分法实现实例
2013/11/21 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
C# Debug和Testing相关面试题
2015/10/25 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
招商经理岗位职责
2013/11/16 职场文书
触摸春天教学反思
2014/02/03 职场文书
网站创业计划书
2014/04/30 职场文书
模具专业自荐信
2014/05/29 职场文书
国际贸易专业求职信
2014/06/04 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
航班延误投诉信
2015/07/02 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
springcloud整合seata
2022/05/20 Java/Android