微信小程序激励式视频广告组件使用(附完整demo)
发表时间:2021-1-5
发布人:葵宇科技
浏览次数:141
目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为:
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
- })
- }
- });
demo下载:
WxAdvertisement-master.rar