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


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的闭包的一个示例说明
Nov 18 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
JS闭包原理及其使用场景解析
Dec 03 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
通过html表格发电子邮件
2006/10/09 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
JS中的多态实例详解
2017/10/15 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
商务日语专业毕业生自荐信
2014/03/27 职场文书
教师个人自我评价范文
2014/04/13 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2015年元旦标语大全
2014/12/09 职场文书
三下乡个人总结
2015/03/04 职场文书
校长师德表现自我评价
2015/03/05 职场文书
关于做家务的心得体会
2016/01/23 职场文书