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


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方法和技巧大全
Dec 27 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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中使用gettext来支持多语言的方法
2011/05/02 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
零基础php编程好学吗
2019/10/11 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python urlopen 使用小示例
2008/09/06 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python selenium firefox使用详解
2019/02/26 Python
学习python分支结构
2019/05/17 Python
python实现的生成word文档功能示例
2019/08/23 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
护理工作感言
2014/01/16 职场文书
《白鹅》教学反思
2014/04/13 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
八年级作文之感恩
2019/11/22 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
Spring中的@Transactional的工作原理
2022/06/05 Java/Android