HarmonyOS鸿蒙Next中【快应用】nativeAd.onStatusChanged和nativeAd.onDownloadProgress接口正确监听广告下载进度与状态

HarmonyOS鸿蒙Next中【快应用】nativeAd.onStatusChanged和nativeAd.onDownloadProgress接口正确监听广告下载进度与状态 【关键词】

原生广告、下载监听、状态返回

【问题背景】

快应用接入原生广告后，通过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()     
}

截图：