原生广告、下载监听、状态返回
【问题背景】
快应用接入原生广告后，通过nativeAd.onStatusChanged和nativeAd.onDownloadProgress接口来监听广告下载状态和进度，但是在广告触发下载后，没有回调返回。该如何解决?
代码：
showNativeAd() {
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]
this.native.isShowImg = true
} else {
this.native.isShowImg = false
this.native.adImgSrc = ''
}
if (this.native.adData.desc) {
this.native.desc = this.native.adData.desc
this.native.isShowDesc = true
}
let showVideoFlag = false
if (this.native.adData.videoUrlList && this.native.adData.videoUrlList[0]) {
this.native.adVideoSrc = this.native.adData.videoUrlList[0]
showVideoFlag = true
} else {
this.native.isShowVideo = false
this.native.adVideoSrc = ''
}
if (this.native.isShowImg && showVideoFlag) {
setTimeout(() => {
this.native.isShowVideo = true
this.native.isShowImg = false
}, 1000)
}
}
this.native.isShow = true
this.native.errStr = ''
})
nativeAd.onError((e) => {
console.error('load ad error:' + JSON.stringify(e))
this.native.isShowImg = false
this.native.isShowVideo = false
})
nativeAd.load()
nativeAd.onDownloadProgress((data) => {
console.log('onDownloadProgress data = ', data)
})
nativeAd.onStatusChanged((data) => {
console.log('onStatusChanged data = ', data)
})
},
截图：
【问题分析】
通过上图可以看出ad-button组件有成功展示进度条状态，然而在日志里却没有输出，说明接口是没有成功监听下载进度条和状态的。
我们在调用onDownloadProgress的上下文加上日志看下日志执行顺序。
console.log("onDownloadProgress start");
nativeAd.onDownloadProgress((data) => {
console.log('onDownloadProgress data = ', data)
})
nativeAd.onStatusChanged((data) => {
console.log('onStatusChanged data = ', data)
})
console.log("onDownloadProgress end");
可以明显看出，监听方法在广告出来前就触发了，之后广告数据才加载出来，此使再去点击下载必然是监听不到的。我们需要在广告加载出来后再去触发监听，这样才能成功的。
【解决方法】
为了更好的监听，我们可以onload中去调用onDownloadProgress和onStatusChanged，因为onload是广告加载成功回调，就是只有广告加载成功后才能触发。
代码如下：
showNativeAd() {
nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId })
nativeAd.onLoad((data) => {
console.info('ad data loaded: ' + JSON.stringify(data))
nativeAd.onDownloadProgress((data) => {
console.log('onDownloadProgress data = ', data)
})
nativeAd.onStatusChanged((data) => {
console.log('onStatusChanged data = ', data)
})
this.native.adData = data.adList[0]
if (this.native.adData) {
if (this.native.adData.imgUrlList) {
this.native.adImgSrc = this.native.adData.imgUrlList[0]
this.native.isShowImg = true
} else {
this.native.isShowImg = false
this.native.adImgSrc = ''
}
if (this.native.adData.desc) {
this.native.desc = this.native.adData.desc
this.native.isShowDesc = true
}
let showVideoFlag = false
if (this.native.adData.videoUrlList && this.native.adData.videoUrlList[0]) {
this.native.adVideoSrc = this.native.adData.videoUrlList[0]
showVideoFlag = true
} else {
this.native.isShowVideo = false
this.native.adVideoSrc = ''
}
if (this.native.isShowImg && showVideoFlag) {
setTimeout(() => {
this.native.isShowVideo = true
this.native.isShowImg = false
}, 1000)
}
}
this.native.isShow = true
this.native.errStr = ''
})
nativeAd.onError((e) => {
console.error('load ad error:' + JSON.stringify(e))
this.native.isShowImg = false
this.native.isShowVideo = false
})
nativeAd.load()
},截图：
