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


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 相关文章推荐
原始的js代码和jquery对比体会
Sep 10 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
微信小程序中限制激励式视频广告位显示次数(实现思路)
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中获得视频时间总长度的另一种方法
2011/09/15 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php格式化时间戳
2016/12/17 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
理解javascript异步编程
2016/01/27 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python实现简单socket通信的方法
2016/04/19 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
C有"按引用传递"吗
2016/09/06 面试题
ajax是什么及其工作原理
2012/02/08 面试题
青年文明号复核材料
2014/02/11 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
万能检讨书2000字
2014/10/17 职场文书
经理聘任证明
2015/03/02 职场文书
会议主持人开场白台词
2015/05/28 职场文书
初中政治教学工作总结
2015/08/13 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python