【快应用】快应用中开屏广告模拟
【关键词】
开屏、原生广告、stack
【问题背景】
快应用中目前暂时不支持开屏广告，开发者如想在应用启动时展示广告，可以在快应用中用原生广告来模拟替代，从而来实现开屏广告的效果。
【问题分析】
实现上是比较简单的，首先需要将首页替换成一个只有原生广告展示的ux页面，然后在展示几秒后，通过router接口跳转到快应用的实际首页。
同时在模拟的开屏广告页上还需要加个关闭广告的按钮，可以点击后提前关闭广告跳转到后续页面。
【解决方案】
布局方面实现：
1、 由于原生广告返回的可能是图片或者视频，需要使用stack组件将它们堆叠在一起实现，后续可以根据原生广告请求返回的值来决定使用image还是video组件。
<stack class="stackstyle" onclick="reportNativeClick()">
<image if="native.isShowImg" class="img" src="{{native.adImgSrc}}"></image>
<video id="video" if="native.isShowVideo" src="{{native.adVideoSrc}}" autoplay="true" onclick="reportNativeClick()" class="video"></video>
</stack>2、 关闭按钮实现，通过position属性将关闭按钮固定在右上角。
<text class="closebtn" onclick="closeAd">关闭{{value}}</text>
.closebtn {
width: 80px;
height: 60px;
border-radius: 30px;
font-size: 25px;
text-align: center;
border: 1px solid #d1cdcd;
right: 10;
top: 10;
position: absolute;
}主要逻辑代码实现：
1、 开屏广告的请求与展示（其实就是原生广告的请求与展示）
2、 通过定时器来实现一个倒计时效果，在广告展示几秒后自动跳转下一页面。
3、 关闭按钮点击，关闭广告展示和立即跳转下一页面。
onShow(options) {
'// Do something .'
this.showNativeAd()
this.cutdown()
setTimeout(() => {
router.replace({
uri: '/Hello',
})
}, 4000);
},
cutdown() {
var timer = setInterval(() => {
this.value--
}, 1000);
if (this.value === 0) {
clearInterval(timer);
}
console.log(222);
},【完整代码】
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<stack class="stackstyle" onclick="reportNativeClick()">
<image if="native.isShowImg" class="img" src="{{native.adImgSrc}}"></image>
<video id="video" if="native.isShowVideo" src="{{native.adVideoSrc}}" autoplay="true" onclick="reportNativeClick()" class="video"></video>
</stack>
<text class="closebtn" onclick="closeAd">关闭{{value}}</text>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 100px;
}
.img {
width: 100%;
height: 100%;
object-fit: fill;
}
.video {
width: 100%;
height: 100%;
}
.stackstyle {
width: 100%;
height: 100%;
}
.closebtn {
width: 80px;
height: 60px;
border-radius: 30px;
font-size: 25px;
text-align: center;
border: 1px solid #d1cdcd;
right: 10;
top: 10;
position: absolute;
}
</style>
<script>
import ad from '@service.ad';
import prompt from '@system.prompt';
import router from '@system.router';
let nativeAd;
module.exports = {
data: {
componentName: "ad",
provider: "",
native: {
adUnitId: "testb65czjivt9",
isShow: false,
adData: {},
isShowImg: true,
isShowVideo: false,
isShowData: true,
errStr: "",
adImgSrc: "",
adVideoSrc: ""
},
value: 4
},
onShow(options) {
'// Do something .'
this.showNativeAd()
this.cutdown()
setTimeout(() => {
router.replace({
uri: '/Hello',
})
}, 4000);
},
cutdown() {
var timer = setInterval(() => {
this.value--
}, 1000);
if (this.value === 0) {
clearInterval(timer);
}
console.log(222);
},
closeAd() {
this.native.isShowImg = false
this.native.isShowVideo = false
clearTimeout(this.timerr);
router.replace({
uri: '/Hello',
})
},
getAdProvider: function () {
this.provider = ad.getProvider();
prompt.showToast({
message: "getProvider : " + this.provider,
duration: 2000,
gravity: "center"
});
},
showNativeAd() {
this.getAdProvider();
if (this.provider !== "huawei") {
console.info("the device does not support ad.");
return;
}
nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId });
nativeAd.onLoad(data => {
console.info("ad data loaded: " + JSON.stringify(data));
this.native.adData = data.adList[0];
if (this.native.adData) {
if (this.native.adData.imgUrlList) {
this.native.adImgSrc = this.native.adData.imgUrlList[0];
console.info(" this.native.adImgSrc =" + this.native.adImgSrc);
this.native.isShowImg = true;
} else {
this.native.isShowImg = false;
this.native.adImgSrc = "";
}
if (this.native.adData.videoUrlList && this.native.adData.videoUrlList[0]) {
this.native.adVideoSrc = this.native.adData.videoUrlList[0];
this.native.isShowVideo = true;
} else {
this.native.isShowVideo = false;
this.native.adVideoSrc = "";
}
this.native.isShow = true;
this.native.errStr = "";
this.reportNativeShow();
}
});
nativeAd.onError(e => {
console.error("load ad error:" + JSON.stringify(e));
this.native.isShowImg = false;
this.native.isShowVideo = false;
this.native.isShow = false;
this.native.errStr = JSON.stringify(e);
});
nativeAd.load();
},
reportNativeShow() {
if (nativeAd) {
nativeAd.reportAdShow({ adId: this.native.adData.adId });
}
},
reportNativeClick() {
nativeAd.reportAdClick({
adId: this.native.adData.adId
});
},
}
</script>