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


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 树形结构的选择器
Feb 15 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
Vue路由守卫之路由独享守卫
Sep 25 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python中itertools的用法详解
2020/02/07 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
村干部培训方案
2014/05/02 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书