【快应用】快应用中开屏广告模拟

本文主要是介绍【快应用】快应用中开屏广告模拟，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 【关键词】

开屏、原生广告、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 = falsethis.native.isShowVideo = falseclearTimeout(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>

这篇关于【快应用】快应用中开屏广告模拟的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---