uni-app Draw视频信息流广告组件 <ad-draw/> 加上v-if="false"就会闪退

uni-app Draw视频信息流广告组件 <ad-draw/> 加上v-if="false"就会闪退

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
HBuilderX 3.99
iOS 16

示例代码：

<template>
<!-- 仅nvue页面支持 -->
<view class="content">
<view class="ad-draw">
<ad-draw :data="adData" @load="onload" @error="onerror" v-if=“show”></ad-draw>
</view>
</view>
</template> 

<script>
export default {
props: {
show: {
type: Boolean,
default: true
}
},
data() {
return {
title: 'ad-draw',
adData: {}
}
},
onReady: function (e) {
this.getAdData()
},
methods: {
getAdData: function (e) {
// 仅APP平台支持
plus.ad.getDrawAds({
adpid: '1507000690',  // 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
count: 1,   // 广告数量，默认 1-3
width: 300,  // 根据宽度获取合适的广告(单位px)
height: 300  // 根据高度获取合适的广告(单位px)
},
(res) => {
this.adData = res.ads[0];
console.log(this.adData);
},
(err) => {
console.log(err);
}
)
},
onload(e) {
console.log("onload",e);
},
onerror(e) {
console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
}
}
}
</script>

操作步骤：

  • 先创建组件，随后使用v-if销毁组件就会闪退

预期结果：

  • 能使用v-if正常销毁组件

实际结果：

  • 先创建组件，随后使用v-if销毁组件就会闪退

bug描述：

  • 苹果13/ios 16.1
  • Draw视频信息流广告 组件 <ad-draw/> 加上v-if="false"就会闪退
  • 麻烦你们处理问题能快点啊，别磨磨唧唧的，问问题都不鸟的

更多关于uni-app Draw视频信息流广告组件 <ad-draw/> 加上v-if="false"就会闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

广告技术支持快捷入口 QQ：3212223575

更多关于uni-app Draw视频信息流广告组件 <ad-draw/> 加上v-if="false"就会闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 <ad-draw/> 组件时，如果加上 v-if="false" 导致应用闪退，可能是由于以下原因：

1. 组件生命周期问题

<ad-draw/> 组件可能依赖于某些生命周期钩子或初始化逻辑，当 v-if="false" 时，组件被销毁，再次显示时可能会导致初始化失败，从而引发闪退。

2. 广告 SDK 的限制

某些广告 SDK 可能对组件的渲染和销毁有严格的要求。当 v-if="false" 时，广告组件被销毁，可能会导致 SDK 内部状态异常，进而引发闪退。

3. 内存管理问题

频繁地销毁和重新创建广告组件可能会导致内存管理问题，特别是在广告组件占用较多资源的情况下。

解决方案

1. 使用 v-show 替代 v-if

v-show 通过 CSS 控制组件的显示和隐藏，不会销毁组件。这样可以避免因组件销毁和重新创建导致的问题。

<ad-draw v-show="showAd" />

在 data 中定义 showAd：

data() {
  return {
    showAd: false
  };
}

2. 延迟加载广告组件

如果需要使用 v-if，可以尝试在组件显示时延迟加载广告组件，避免在组件初始化时立即加载广告。

<ad-draw v-if="showAd && isAdLoaded" />

在 data 中定义 showAd 和 isAdLoaded，并在适当的时机将 isAdLoaded 设置为 true。

3. 检查广告 SDK 的文档

查阅使用的广告 SDK 文档，了解是否有关于组件销毁和重新创建的限制或建议。

4. 错误捕获与日志记录

在组件周围添加错误捕获机制，记录闪退时的错误信息，帮助定位问题。

<template>
  <div>
    <ad-draw v-if="showAd" @error="handleAdError" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAd: false
    };
  },
  methods: {
    handleAdError(error) {
      console.error('广告组件错误:', error);
      // 处理错误，例如隐藏广告组件
      this.showAd = false;
    }
  }
};
</script>
回到顶部