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


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 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
seajs下require书写约定实例分析
May 16 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
Nest.js 授权验证的方法示例
Feb 22 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
解决jquery版本冲突的有效方法
2014/09/02 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Django 反向生成url实例详解
2019/07/30 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
热门专业求职信
2014/05/24 职场文书
干部个人对照检查材料
2014/08/25 职场文书
普宁寺导游词
2015/02/04 职场文书
中国世界遗产导游词
2015/02/13 职场文书
端午节寄语2015
2015/03/23 职场文书
公司地址变更通知
2015/04/25 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Python安装使用Scrapy框架
2022/04/12 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers