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


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 操作option的实现代码
Mar 03 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
vue.js中mint-ui框架的使用方法
May 12 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
javascript canvas时钟模拟器
Jul 13 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
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python版本五子棋的实现代码
2018/12/11 Python
Python 函数返回值的示例代码
2019/03/11 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
项目考察欢迎辞
2014/01/17 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
技术合作协议书范本
2014/04/18 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
工作说明书格式
2014/07/29 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
新员工考核评语
2014/12/31 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书