uni-app中<ad-rewarded-video>使用正确但页面中不显示是什么原因呢？

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app中<ad-rewarded-video>使用正确但页面中不显示是什么原因呢？

问题描述

我按照官方文档接入 uni-ad 到微信小程序，从uni-ad管理后台复制了正确的 adpid 来配置该组件，可是运行了微信小程序后在页面中这个组件却不显示，这是什么原因呢？

代码示例

<template>  
  <view class="content">  
    <ad-rewarded-video adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @close="onadclose">  
      <button :disabled="loading" :loading="loading">显示广告</button>  
      <view v-if="error">{{error}}</view>  
    </ad-rewarded-video>  
  </view>  
</template>

开发环境与版本信息

项目创建方式 开发环境 版本号
微信小程序 uni-app -

Harmonyos Next教程
3 回复

找到原因了， <ad-rewarded-video> 不能放在 自定义的 uni-popup 内使用，要放到page里


如何确定和 uni-popup 有关系的？界面是否看到了 显示广告 按钮?

在uni-app中，如果你发现<ad-rewarded-video>组件使用正确但页面中不显示，可能是由于多种原因导致的。以下是一些常见的问题及其可能的解决方案，并通过代码示例展示如何排查和修正这些问题。

1. 检查广告是否加载成功

首先，确保广告已经成功加载。可以通过监听广告组件的load和error事件来检查广告加载状态。

<template>
  <view>
    <ad-rewarded-video
      id="rewardedVideo"
      @load="onAdLoad"
      @error="onAdError"
    />
    <button @click="showAd">Show Rewarded Video Ad</button>
  </view>
</template>

<script>
export default {
  methods: {
    onAdLoad() {
      console.log('Rewarded video ad loaded.');
    },
    onAdError(err) {
      console.error('Rewarded video ad load failed:', err);
    },
    showAd() {
      const rewardedVideo = this.$mp.page.selectComponent('#rewardedVideo');
      if (rewardedVideo.show) {
        rewardedVideo.show().catch(err => {
          console.error('Failed to show rewarded video ad:', err);
        });
      } else {
        console.error('Rewarded video ad is not ready to show.');
      }
    }
  }
};
</script>

2. 检查广告配置

确保你已经在manifest.json中正确配置了广告信息，包括appid和placementid。

{
  "mp-weixin": {
    "appid": "your-app-id",
    "setting": {
      "ad-": {
        "appid": "your-adapp-id",
        "rewardedVideo": {
          "placementid": "your-placement-id"
        }
      }
    }
  }
}

3. 检查平台兼容性

确保你正在测试的平台支持<ad-rewarded-video>组件。某些平台可能不支持或需要特定的配置。

4. 检查广告库存

有时广告不显示是因为广告库存不足。这通常发生在测试环境中，因为测试广告库存有限。尝试在正式环境中测试，看是否能正常显示。

5. 检查代码逻辑

确保在调用show方法之前，广告已经成功加载。如果广告加载失败或未准备好，show方法将不会显示广告。

6. 调试信息

利用开发者工具的控制台输出调试信息，检查是否有其他错误或警告信息影响广告显示。

通过上述步骤和代码示例，你应该能够诊断并解决<ad-rewarded-video>组件不显示的问题。如果问题依然存在，建议查阅uni-app官方文档或联系技术支持获取更专业的帮助。

回到顶部