投稿 评论 顶部
 手机版 | 登陆 | 注册 | 留言 | 设首页 | 加收藏

博客小程序阅读文章激励视频重复可免费阅读

阿星 教程专区

小程序第一次阅读文章需要激励视频,随后某个时间段内重复可免费阅读。

小程序点击阅读文章时候优先判断是否有流量主,无流量功能则直接进入文章。

若有流量主再次判断是否有有缓存记录,如果无缓存记录则提示用户观看激励视频广告,如果有记录对比缓存记录的值,大于用户重新观看激励视频,其他则免费阅读。

流程图:

核心代码:

获取现在时间段,将年份日期月份相加的值存在名为storage_key+文章id的缓存中。

var frDate = new Date();this.frDate = frDate.getUTCFullYear() + (frDate.getMonth() + 1 ) + (frDate.getDate()+1);var posIdInfo = uni.getStorageSync('storage_key' + this.postID);
// 数据缓存      adCache(){        uni.setStorage({            key: 'storage_key' + this.postID ,            data: this.frDate,            success:()=> {                console.log('成功缓存:storage_key' + this.postID );            }        });      }

 

注意:

1.测试时请将请求中的域名换成自己的

2.该版本为uni-app框架需要hbuilder x编译,

3.请在manifest.json文件中将微信小程序运行配置添加您的小程序id

4.弹窗取消事件请在代码中134行添加,本案例是演示逻辑无上下级界面跳转

案例:

<template>  <view class="content">    <view class="">      {{ contentDate.title.rendered }}    </view>    <view class="">      <rich-text :nodes="contentDate.content.rendered"></rich-text>    </view>  </view></template><script>  // 在页面中定义激励视频广告  let videoAd = null  export default {    data() {      return {        title: 'Hello',        wxAD: 'adunit-9737fd476e3e42c1',        contentDate: [],        frDate:'',        postID:'3393'      }    },    onLoad() {      // 执行函数      this.getPostDate();      this.getinspect();    },    methods: {      // 先检测是有有流量主广告,如果有id执行预加载广告,如果没有阅读全文;      // 随后frDate获取当前时间,存为缓存storage_key + 文章id      // 判断是否有缓存,如果没有则弹窗激励视频阅读,如果有缓存对比storage_key的值,大于需要阅读广告,其他不要      //各个小程序端为其自带的storage api,数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用      getinspect() {        if (this.wxAD != '') {          console.log('有流量主正在预加载广告')          this.getFlowmain();          var frDate = new Date();          this.frDate = frDate.getUTCFullYear() + (frDate.getMonth() + 1 ) + (frDate.getDate()+1);          var posIdInfo = uni.getStorageSync('storage_key' + this.postID);          if(posIdInfo == ''){            this.adPopup();            console.log('缓存为空')          }else{            if(posIdInfo < this.frDate){              this.adPopup();              var posIdInfo = uni.getStorageSync('storage_key' + this.postID);              console.log(this.frDate)            }else{              console.log('直接阅读全文',this.frDate, posIdInfo)            }          }        } else {          console.log('没流量主直接阅读全文')        }      },      // 广告预加载      getFlowmain() {        if (wx.createRewardedVideoAd) {          videoAd = wx.createRewardedVideoAd({            adUnitId: this.wxAD          })          videoAd.onLoad(() => {})          videoAd.onError((err) => {            uni.showToast({              icon: 'none',              title: "观看失败,请稍后重试"            })          })        }      },      // 点击阅读按钮      tapAD() {        if (videoAd) {          videoAd.show().catch(() => {            // 失败重试            videoAd.load()              .then(() => videoAd.show())              .catch(err => {                console.log('激励视频 广告显示失败')              })          })          videoAd.onError((err) => {            uni.showToast({              icon: 'none',              title: "观看失败,请稍后重试"            })          })          videoAd.onClose((res) => {            if (res && res.isEnded) {              console.log('广告成功')              this.adCache();            } else {              uni.showToast({                icon: 'none',                title: "中途关闭广告"              })            }          })        }      },      // 请求文章      getPostDate() {        uni.request({          url: 'https://www.xg3q.com/wp-json/wp/v2/posts/' + this.postID, //仅为示例,并非真实接口地址。          success: (res) => {            this.contentDate = res.data          },          fail: {          }        });      },      //弹窗      adPopup(){        uni.showModal({          title: '提示说明',          content: '您需要观看激励广告方可阅读',          cancelText: '不看',          confirmText: '观看',          success: (res) => {            if (res.confirm) {              this.tapAD()              console.log('用户点击确定,触发广告');            } else if (res.cancel) {              // 请添加用户点击取消事件              console.log('用户点击取消');            }          }        });      },      // 数据缓存      adCache(){        uni.setStorage({            key: 'storage_key' + this.postID ,            data: this.frDate,            success:()=> {                console.log('成功缓存:storage_key' + this.postID );            }        });      }    }  }</script><style>  .content {    margin: 30rpx;  }</style>
资源下载