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


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 相关文章推荐
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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(5) 类和对象
2010/02/16 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
Three.js学习之网格
2016/08/10 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python解决八皇后问题示例
2018/04/22 Python
python程序封装为win32服务的方法
2021/03/07 Python
python输出带颜色字体实例方法
2019/09/01 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
管理学院毕业生自荐信范文
2014/03/10 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
金融管理专业求职信
2014/07/10 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
会计求职自荐信范文
2015/03/04 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python