uniapp微信小程序激励广告接入指南

如何在uniapp中接入微信小程序的激励广告？具体步骤和注意事项有哪些？遇到广告加载失败或无法触发的问题该怎么解决？

2 回复
  1. 申请广告位：在微信小程序后台开通流量主，添加激励视频广告位。
  2. 引入广告组件：在页面JSON中配置<ad unit-id="你的广告单元ID" type="rewarded-video">。
  3. 监听广告事件：通过onLoad、onClose等事件处理广告加载、播放完成和关闭逻辑。
  4. 触发广告：用户点击按钮后调用this.ad.show()播放广告。
  5. 发放奖励：在onClose回调中根据广告完成状态发放游戏币等奖励。

注意测试时使用真机，开发工具可能无法正常展示广告。


在 UniApp 中接入微信小程序激励广告，需完成以下步骤：

1. 开通广告位

  • 登录微信小程序后台，进入「流量主」模块。
  • 申请开通激励视频广告，获取广告位 ID（adUnitId）。

2. 配置 UniApp 项目

在 pages.json 中为需要展示广告的页面配置广告：

{
  "path": "pages/index/index",
  "style": {
    "enableRewardedVideo": true
  }
}

3. 代码实现

在 Vue 页面中引入并创建激励广告组件：

<template>
  <view>
    <button @tap="showAd">点击观看广告</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rewardedVideoAd: null
    }
  },
  onLoad() {
    this.initAd()
  },
  methods: {
    // 初始化广告
    initAd() {
      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) {
          // 正常播放完成，发放奖励
          this.grantReward()
        } else {
          // 未完整播放，不发放奖励
          uni.showToast({ title: '未完成观看', icon: 'none' })
        }
      })
    },

    // 展示广告
    showAd() {
      this.rewardedVideoAd.show().catch(err => {
        // 失败时重新加载
        this.rewardedVideoAd.load().then(() => this.rewardedVideoAd.show())
      })
    },

    // 发放奖励
    grantReward() {
      uni.showToast({ title: '奖励已发放', icon: 'success' })
      // 这里添加实际奖励逻辑（如增加积分、解锁功能等）
    }
  }
}
</script>

4. 注意事项

  • 测试阶段：使用测试广告位 ID 避免频繁请求限制。
  • 加载时机：可提前预加载广告提升用户体验。
  • 错误处理：添加完整的错误处理，包括加载失败、展示失败等情况。
  • 用户引导：在广告未加载完成时给用户适当提示。

5. 审核发布

确保广告场景符合平台规范，审核通过后方可发布。

按照以上步骤即可完成 UniApp 微信小程序激励广告的接入。

回到顶部