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


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 setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
jQuery动态添加
Apr 07 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
如何使用php输出时间格式
2013/08/31 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
永不消失的title提示代码
2007/02/15 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
three.js 入门案例详解
2018/01/23 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
tensorflow 环境变量设置方式
2020/02/06 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
降低python版本的操作方法
2020/09/11 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
医药销售自荐书
2014/05/29 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014年党员整改措施
2014/10/24 职场文书
2015元旦节寄语
2014/12/08 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
教师病假条范文
2015/08/17 职场文书