【转】小程序第一次阅读文章需要激励视频，随后某个时间段内重复可免费阅读
原文来自：https://www.frbkw.com/3399/小程序第一次阅读文章需要激励视频，随后某个时间段内重复可免费阅读；小程序点击阅读文章时候优先判断是否有流量主，无流量功能则直接进入文章
若有流量主再次判断是否有有缓存记录，如果无缓存记录则提示用户观看激励视频广告如果有记录对比缓存记录的值，大于用户重新观看激励视频，其他则免费阅读
注意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> 用不上 但感谢分享 谢谢，我好想用得到 很好的方法
页:
[1]