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


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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
封装属于自己的JS组件
Jan 27 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Python:slice与indices的用法
2019/11/25 Python
python psutil监控进程实例
2019/12/17 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
造价工程师个人求职信
2013/09/21 职场文书
学生实习推荐信范文
2013/11/26 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015年副班长工作总结
2015/05/15 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android