微信小程序激励广告用户体验优化
小程序的激励视频广告，按照文档所提示的，在onLoad函数中进行初始化，可以发现打开这个页面有明显的延迟卡顿。 let videoAd = null;
let adFen = 0;
onLoad: function (options) {
const that = this;
if (wx.createRewardedVideoAd) {
videoAd = wx.createRewardedVideoAd({
adUnitId: '广告位'
})
videoAd.onLoad(() => { })
videoAd.onError((err) => {
console.log('onError event emit', err)
})
videoAd.onClose((res) => {
// 用户点击了【关闭广告】按钮
if (res && res.isEnded) {
// 正常播放结束，可以下发游戏奖励
that.adFen = that.adFen + 10
wx.setStorageSync('ad', that.adFen);
wx.showToast({
title: '获得奖励',
})
} else {
// 播放中途退出，不下发游戏奖励
}
})
}
},
可以将广告初始化工作放到onLoad函数外，当播放广告时，判断有没有初始化，没有初始化的时候，先初始化。 // 初始化广告实例函数
loadAd: function () {
const that = this;
if (wx.createRewardedVideoAd) {
videoAd = wx.createRewardedVideoAd({
adUnitId: '广告位'
})
videoAd.onLoad(() => { })
videoAd.onError((err) => {
console.log('onError event emit', err)
})
videoAd.onClose((res) => {
// 用户点击了【关闭广告】按钮
if (res && res.isEnded) {
// 正常播放结束，可以下发游戏奖励
that.adFen = that.adFen + 10
wx.setStorageSync('ad', that.adFen);
wx.showToast({
title: '获得奖励',
})
} else {
// 播放中途退出，不下发游戏奖励
}
})
}
},
这样调整之后，虽然进入页面流畅了，但是播放广告时明显的看到广告拉取有一段空白时间，用户体验很差，我通过在这段时间内显示加载动画来解决。在处理加载动画的时候，发现加载动画一直在显示，设置的隐藏动画函数并没有生效，原因是我采用了广告案例中的广告拉取失败重试，没有在重试的函数中调用隐藏动画函数。具体看代码： // 播放广告函数
showAd: function () {
wx.showLoading({
title: '广告加载中',
});
const that = this;
if (videoAd) {
} else {
that.loadAd();
}
if (videoAd) {
videoAd.show().then(() => {
// 关键点1：广告显示后，退出加载动画
wx.hideLoading();
}).catch(() => {
// 失败重试
videoAd.load()
.then(() => videoAd.show().then(() => {
// 关键点2：广告显示后，退出加载动画
wx.hideLoading();
}))
.catch(err => {
console.log('激励视频 广告显示失败')
})
})
} else {
wx.hideLoading();
wx.showToast({
title: '请稍后再试',
})
return
}
},
可以打开下面的小程序进行体验！ [图片]
