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

满镇开着桔梗，蒲公英飞得比石榴树还高，一直飘进山脚的稻海。闭上眼睛，突然就看到了那个明净惆怅的乡下，想到了恋恋不忘却又一年回不去几次的故乡

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

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

若有流量主再次判断是否有有缓存记录，如果无缓存记录则提示用户观看激励视频广告

如果有记录对比缓存记录的值，大于用户重新观看激励视频，其他则免费阅读

流程图

核心代码

获取现在时间段，将年份日期月份相加的值存在名为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.frbkw.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>

案例下载

链接: https://pan.baidu.com/s/1yEX7AhiROOIoDAo7cd5o4A 提取码: wmhe