uniapp 微信激励广告组件如何接入和使用

在uniapp中接入微信激励广告组件时，具体步骤是什么？需要配置哪些参数？有没有完整的示例代码可以参考？另外，激励广告的触发条件和回调函数如何处理？开发过程中可能会遇到哪些常见问题，如何解决？

2 回复

在uniapp中接入微信激励广告，先在小程序后台开通流量主并获取广告位ID。然后在页面中引入广告组件：

<ad unit-id="你的广告位ID" ad-type="video"></ad>

通过uni.createRewardedVideoAd()创建实例，监听onLoad、onError等事件。用户看完广告后触发onClose回调，根据isEnded判断是否完成观看，完成则发放奖励。


在 UniApp 中接入微信激励广告组件，需通过微信小程序广告能力实现。以下是详细步骤和示例代码：

一、接入准备

  1. 开通广告位
    在微信小程序后台 → 「流量主」模块申请开通广告位，获取广告单元 ID（adUnitId）。

  2. UniApp 配置
    在 manifest.json 中声明广告组件：

    {
  "mp-weixin": {
    "appid": "你的小程序ID",
    "usingComponents": true,
    "requiredPrivateInfos": ["requireRewardedVideoAd"]
  }
}

二、代码实现

1. 创建激励广告组件

在页面或组件中声明广告：

<template>
  <view>
    <button @click="showAd">点击看广告</button>
    <!-- 广告组件 -->
    <ad-rewarded-video 
      ad-unit-id="你的广告单元ID"
      :load-on-mounted="false"
      ref="rewardedAd"
    />
  </view>
</template>

2. 控制广告显示（推荐使用 JS API）

export default {
  data() {
    return {
      rewardedVideoAd: null
    }
  },
  onLoad() {
    this.initRewardedAd()
  },
  methods: {
    // 初始化激励广告
    initRewardedAd() {
      this.rewardedVideoAd = uni.createRewardedVideoAd({
        adUnitId: '你的广告单元ID'
      })

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

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

      // 监听广告关闭
      this.rewardedVideoAd.onClose(res => {
        if (res.isEnded) {
          // 正常播放完成，发放奖励
          this.giveReward()
        } else {
          // 用户中途关闭
          uni.showToast({ title: '未完成观看', icon: 'none' })
        }
      })
    },

    // 显示广告
    async showAd() {
      try {
        await this.rewardedVideoAd.show()
      } catch (err) {
        // 广告未加载时重新加载
        await this.rewardedVideoAd.load()
        await this.rewardedVideoAd.show()
      }
    },

    // 发放奖励
    giveReward() {
      uni.showToast({ title: '奖励已发放', icon: 'success' })
      // 这里执行你的奖励逻辑（如加积分、解锁功能等）
    }
  }
}

三、注意事项

  1. 测试阶段：使用测试广告单元 ID adunit-xxxxxxxxxxxxxxxx 避免真实扣费
  2. 加载时机：可提前调用 .load() 预加载广告提升用户体验
  3. 错误处理：网络异常或广告拉取失败时需捕获错误并重试
  4. 合规要求：必须明确提示用户这是广告，且不得诱导点击

四、完整流程

  1. 用户点击触发广告 → 2. 检查广告是否加载 → 3. 展示全屏视频 → 4. 根据关闭行为发放奖励

通过以上代码即可快速集成激励广告。实际开发中建议加入加载状态提示和错误重试机制，提升稳定性。

回到顶部