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


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学习笔记(五)正则表达式
Apr 08 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
js实现纯前端压缩图片
Nov 16 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
一个简单实现多条件查询的例子
2006/10/09 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php实现mysql封装类示例
2014/05/07 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
理解JavaScript原型链
2016/10/25 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python logging模块的使用
2020/09/07 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
触电现场处置方案
2014/05/14 职场文书
销售目标责任书
2014/07/23 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
七一活动主持词
2015/06/29 职场文书
素质拓展训练感想
2015/08/07 职场文书
文明礼貌主题班会
2015/08/14 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
element多个表单校验的实现
2021/05/27 Javascript