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


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 遍历验证所有文本框的值
Aug 27 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
js精度溢出解决方案
Dec 02 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
微信小程序实现购物页面左右联动
Feb 15 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
php 判断数组是几维数组
2013/03/20 PHP
PHP生成器简单实例
2015/05/13 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
编写Python CGI脚本的教程
2015/06/29 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python binascii 进制转换实例
2019/06/12 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
门卫岗位职责
2013/11/15 职场文书
财务人员个人工作总结
2015/02/27 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
python tkinter模块的简单使用
2021/04/07 Python