uniapp激励视频如何集成和使用

在uniapp中如何集成激励视频广告？具体实现步骤是什么？需要引入哪些SDK或插件？调用激励视频的API方法和回调处理有哪些注意事项？如何在iOS和Android平台上分别配置？测试时如何模拟激励视频的加载和播放？如果遇到广告加载失败或无法显示的问题，应该如何排查和解决？

2 回复

uniapp集成激励视频，推荐使用uni-ad插件。步骤如下：

  1. 在manifest.json中勾选uni-ad模块。
  2. 在页面中引入广告组件，配置广告位ID。
  3. 调用load方法加载广告，show方法显示广告。
  4. 监听广告加载成功和关闭事件，处理奖励逻辑。

注意：需在真机测试，确保广告位ID正确。


在 UniApp 中集成和使用激励视频广告，主要通过调用平台提供的广告组件实现。以下是详细步骤和示例代码：

步骤 1：开通广告功能

  • 在对应平台（如微信小程序、字节跳动小程序等）的后台申请开通激励视频广告位，获取广告位 ID（adUnitId）。

步骤 2：在页面中集成广告组件

在页面的 template 中添加激励视频广告组件（注意：某些平台如微信小程序需在 pages.json 中配置广告位）：

<template>
  <view>
    <button @click="showRewardedVideoAd">显示激励视频广告</button>
    <!-- 广告组件（部分平台支持） -->
    <ad-rewarded-video adpid="你的广告位ID" @load="onAdLoad" @close="onAdClose" v-if="showAd"></ad-rewarded-video>
  </view>
</template>

步骤 3：通过 API 控制广告（推荐方式）

大多数平台推荐使用 API 动态创建广告实例，兼容性更好：

<script>
export default {
  data() {
    return {
      rewardedVideoAd: null
    }
  },
  onLoad() {
    // 创建激励视频广告实例
    this.rewardedVideoAd = uni.createRewardedVideoAd({
      adUnitId: '你的广告位ID' // 替换为实际广告位 ID
    });

    // 监听广告加载事件
    this.rewardedVideoAd.onLoad(() => {
      console.log('激励视频广告加载成功');
    });

    // 监听广告错误事件
    this.rewardedVideoAd.onError((err) => {
      console.error('激励视频广告错误:', err);
    });

    // 监听广告关闭事件
    this.rewardedVideoAd.onClose((res) => {
      if (res && res.isEnded) {
        console.log('完整播放，发放奖励');
        // 这里发放用户奖励（如积分、道具等）
      } else {
        console.log('未完整播放，不发放奖励');
      }
    });
  },
  methods: {
    showRewardedVideoAd() {
      // 显示广告
      this.rewardedVideoAd.show().catch(err => {
        console.error('广告显示失败:', err);
        // 如果广告未准备好，可重新加载
        this.rewardedVideoAd.load().then(() => this.rewardedVideoAd.show());
      });
    }
  }
}
</script>

注意事项：

  1. 平台差异：不同小程序平台（微信、字节跳动、百度等）的广告位 ID 获取方式和 API 可能略有差异，请参考对应平台文档。
  2. 测试广告：开发阶段使用测试广告位 ID，避免频繁请求影响正式数据。
  3. 用户触发：广告必须由用户主动触发（如点击按钮），不能自动播放。
  4. 错误处理：添加加载失败或播放失败的回退逻辑，提升用户体验。

示例奖励逻辑：

在 onClose 事件中，根据 res.isEnded 判断是否播放完整，并发放奖励：

onClose(res) {
  if (res.isEnded) {
    uni.showToast({ title: '奖励已发放', icon: 'success' });
    // 执行奖励逻辑，如增加用户积分
  } else {
    uni.showToast({ title: '未完整观看', icon: 'none' });
  }
}

通过以上步骤，即可在 UniApp 中顺利集成激励视频广告功能。如有具体平台问题，可参考 UniApp 官方文档或对应小程序平台文档。

回到顶部