|
现象描述 一个页面存在多个原生广告子组件时，只有最后一个原生广告点击能跳转落地页。 问题代码如下。 广告子组件nativeAd.ux代码： <template>
<div>
<div>
<image src="{{native.adImgSrc}}" @click="reportNativeClick"></image>
<div if="isShow">
<div>
<text if="isShowTitle">{{native.title}}</text>
<div>
<text if="isShowSource">{{native.source}}</text>
<text>广告</text>
</div>
</div>
<div if="native.creativeType === 3" @click="reportNativeClick">
<image src="../../assets/img/Public_qus.png"></image>
<text>{{native.btnTxt}}</text>
</div>
<div if="native.creativeType > 100">
<input type="button" />
<div style="{{progress}}"></div>
<text>{{native.btnTxt}}</text>
</div>
</div>
</div>
</div>
</template>
<style>
.item-container {
width: 100%;
padding: 0 16px;
flex-direction: column;
align-items: center;
align-content: center;
}
.img{
width: 100%;
background-size: cover;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.container {
width: 100%;
padding: 8px 12px;
flex-direction: row;
justify-content: center;
align-items: center;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
background-color: #fff;
}
.container-left {
flex-direction: column;
flex: 1;
}
.title {
font-size: 16px;
line-height: 21px;
color: #000000;
lines: 1;
text-overflow: ellipsis;
}
.source {
text {
font-size: 12px;
color: #999;
}
}
.known-more-btn {
flex-direction: row;
align-content: center;
text-align: center;
height: 28px;
line-height: 28px;
border-radius: 14px;
background-color: rgba(#FF7500, 0.1);
padding: 6px 10px;
margin-right: 8px;
text {
color: #FF7500;
font-size: 12px;
}
image {
margin-right: 5px;
}
}
.ad-btn {
width: 60px;
height: 28px;
line-height: 28px;
border-radius: 14px;
margin-right: 8px;
}
.btn {
width: 100%;
height: 100%;
font-size: 12px;
color: #FF7500;
border-radius: 14px;
background-color: rgba(#FF7500, 0.2);
}
.btn-text {
font-size: 12px;
color: #FF7500;
position: absolute;
top: 5px;
left: 0;
right: 0;
text-align: center;
}
.progress {
position: absolute;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(#fff, 0.3);
}
.more {
width: 24px;
height: 24px;
background-size: contain;
opacity: 0.6;
transform:rotate(90deg);
}
.not-like {
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
position: absolute;
bottom: 50px;
right: 16px;
font-size: 12px;
text-align: center;
font-weight: 700;
background-color: #fff;
border: 1px solid #ddd;
}
</style>
<script>
import ad from "@service.ad";
let TAG = "nativeAd";
let nativeAd;
export default {
data: {
componentName: "ad",
provider: "",
isShow: false,
isShowAd: true,
style: {},
isShowLike: false,
isShowTitle: false,
isShowSource: false,
progress: {},
native: {
adId: "",
title: "",
source: "",
adImgSrc: "",
btnTxt: "",
creativeType: null,
adData: {},
adUnitId: "testb65czjivt9", //大图文广告类型 testu7m3hc4gvm; 大图文带下载按钮 testb65czjivt9
}
},
props: {
advertId: String, //@default: '' description: 广告ID
},
onInit() {
this.$page.setTitleBar({ text: "Native Ad" });
},
onReady() {
this.showNativeAd();
},
showNativeAd() {
//获取服务提供商 如果获取到的 不是“huawei”，则表示不支持广告。
this.provider = ad.getProvider();
if (this.provider !== "huawei") {
return;
}
//创建广告组件
nativeAd = ad.createNativeAd({ adUnitId: this.advertId });
nativeAd.onLoad(data => {
//成功回调
this.native.adData = data.adList[0];
if (this.native.adData) {
if (this.native.adData.imgUrlList && this.native.adData.imgUrlList.length > 0) {
this.native.adImgSrc = this.native.adData.imgUrlList[0];
} else {
this.native.adImgSrc = "";
this.isShowAd = false;
}
this.native.creativeType = this.native.adData.creativeType || null;
this.native.title = this.native.adData.title || "";
this.native.adId = this.native.adData.adId || "";
if (!this.native.title) {
//标题为空时不显示
this.isShowTitle = false;
}
if (!this.native.adData.source) {
//来源为空时不显示 “广告”两个字就顶格显示
this.isShowSource = false;
} else {
this.native.source = this.native.adData.source + ' '
}
if (this.native.creativeType === 3) {
//大图文广告类型
if (this.native.adData.clickBtnTxt) {
this.native.btnTxt = this.native.adData.clickBtnTxt;
} else {
this.native.btnTxt = "了解详情";
}
}
if (this.native.creativeType === 103) {
//大图文带下载按钮
if (this.native.adData.clickBtnTxt) {
this.native.btnTxt = this.native.adData.clickBtnTxt;
} else {
this.native.btnTxt = "下载";
}
}
this.isShowTitle = true;
this.isShowSource = true;
this.reportNativeShow();
}
});
nativeAd.onError(e => {
console.error(TAG," load ad fail:" + JSON.stringify(e));
//失败回调
this.isShowAd = false;
});
//获取广告数据
nativeAd.load();
},
reportNativeShow() {
if (nativeAd) {
console.log(TAG,"nativeAd reportAdShow");
nativeAd.reportAdShow({ adId: this.native.adId });
}
},
reportNativeClick() {
console.log(TAG,"nativeAd reportAdClick");
nativeAd.reportAdClick({
adId: this.native.adId
});
},
onDestroy() {
if (nativeAd) {
//销毁广告组件 取消下载
nativeAd.destroy();
nativeAd.cancelDownload({
adId: this.native.adId
});
}
},
};
</script>页面hello.ux代码： <import name="native-ad" src="../compoment/nativeAd.ux"></import>
<template>
<!-- Only one root node is allowed in template. -->
<div>
<native-ad advert-id="testu7m3hc4gvm"></native-ad>
<native-ad advert-id="testu7m3hc4gvm"></native-ad>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 100px;
}
</style>
<script>
module.exports = {
data: {
componentData: {},
},
onInit() {
this.$page.setTitleBar({
text: 'menu',
textColor: '#ffffff',
backgroundColor: '#007DFF',
backgroundOpacity: 0.5,
menu: true
});
}
}
</script>
| 
