uniapp 激励广告如何实现和使用

在uniapp中如何实现激励广告的接入和使用？具体步骤是什么？是否需要额外的配置或插件？能否提供完整的代码示例和使用注意事项？

2 回复

在uniapp中，使用uni.createRewardedVideoAd创建激励广告。先引入广告位ID，监听加载和错误事件，调用show()方法显示。用户观看完广告后，在close事件中发放奖励。注意处理加载失败和用户中途关闭的情况。


在 UniApp 中，激励广告（如视频广告）可通过 uni-ad 广告组件实现。以下是简要步骤和示例代码：

实现步骤

  1. 开通广告
    在相应平台（如微信小程序、字节跳动小程序）后台申请广告位，获取广告单元 ID（adpid）。

  2. 引入广告组件
    在页面或组件中配置激励广告组件。

示例代码

<template>
  <view>
    <!-- 激励广告组件 -->
    <ad adpid="你的广告单元ID" unit-id="你的单元ID" @load="onAdLoad" @close="onAdClose" @error="onAdError"></ad>
    <button @click="showAd">显示激励广告</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ad: null
    }
  },
  methods: {
    // 广告加载成功
    onAdLoad(e) {
      this.ad = e.detail
      uni.showToast({ title: '广告加载成功', icon: 'none' })
    },
    // 用户关闭广告
    onAdClose(e) {
      if (e.detail && e.detail.isEnded) {
        // 正常播放结束，发放奖励
        uni.showToast({ title: '奖励已发放', icon: 'success' })
      } else {
        // 未完整播放，不发放奖励
        uni.showToast({ title: '未完成观看', icon: 'none' })
      }
    },
    // 广告加载失败
    onAdError(e) {
      uni.showToast({ title: '广告加载失败', icon: 'none' })
    },
    // 显示广告
    showAd() {
      if (this.ad) {
        this.ad.show() // 显示广告
      } else {
        uni.showToast({ title: '广告未准备好', icon: 'none' })
      }
    }
  }
}
</script>

注意事项

  • 广告单元 ID：需替换为实际申请的 ID。
  • 平台差异：不同平台（如微信、抖音）的广告加载和显示方式可能略有不同，请参考对应平台文档。
  • 测试限制：部分平台在测试阶段可能限制广告展示，需使用真机测试或正式环境验证。

通过以上步骤，即可在 UniApp 中集成激励广告功能，并在用户完成观看后发放奖励。

回到顶部