如何在 UniApp 中集成激励奖励（流量主）

引言

在移动应用开发中，广告变现是一种常见的盈利模式。而激励视频广告因其高转化率和用户体验友好，成为了开发者的首选。今天，我们将以 UniApp 为例，手把手教你如何在小程序中集成激励视频广告，并在用户点击按钮后弹出广告，看完广告即可获取源码链接！

一、什么是激励视频广告？

激励视频广告是一种用户主动选择观看的广告形式。用户观看完整广告后，可以获得一定的奖励（如解锁功能、获取资源等）。这种广告形式不仅提升了用户体验，还能为开发者带来可观的收益。

二、UniApp 中集成激励视频广告的步骤

1. 初始化激励视频广告

在 UniApp 中，我们可以通过微信小程序的 wx.createRewardedVideoAd API 来创建激励视频广告实例。以下是初始化广告的代码：

javascript 复制代码

onLoad() {
  if (wx.createRewardedVideoAd) {
    this.videoAd = wx.createRewardedVideoAd({
      adUnitId: 'adunit-996b5af0d7a9213c' // 替换为你的广告单元 ID
    });

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

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

    // 监听广告关闭事件
    this.videoAd.onClose((res) => {
      if (res && res.isEnded) {
        console.log('用户看完了广告');
        this.showLink = true; // 显示链接
      } else {
        console.log('用户未看完广告');
        uni.showToast({
          title: '请完整观看广告以获取链接',
          icon: 'none',
        });
      }
    });
  } else {
    console.error('当前环境不支持激励视频广告');
  }
}

2. 点击按钮弹出广告

当用户点击"获取源码地址"按钮时，调用 videoAd.show() 方法弹出广告。如果广告加载失败，可以尝试重新加载并显示：

javascript 复制代码

handleGetSourceCode() {
  if (this.videoAd) {
    this.videoAd.show().catch(() => {
      // 失败重试
      this.videoAd.load()
        .then(() => this.videoAd.show())
        .catch((err) => {
          console.error('激励视频广告显示失败', err);
          uni.showToast({
            title: '广告加载失败，请重试',
            icon: 'none',
          });
        });
    });
  } else {
    uni.showToast({
      title: '广告未初始化',
      icon: 'none',
    });
  }
}

3. 广告关闭后的逻辑处理

在广告关闭后，判断用户是否完整观看了广告。如果用户看完了广告，则显示源码链接；否则提示用户完整观看广告：

javascript 复制代码

this.videoAd.onClose((res) => {
  if (res && res.isEnded) {
    console.log('用户看完了广告');
    this.showLink = true; // 显示链接
  } else {
    console.log('用户未看完广告');
    uni.showToast({
      title: '请完整观看广告以获取链接',
      icon: 'none',
    });
  }
});

三、完整代码示例

以下是一个完整的 UniApp 页面代码，集成了激励视频广告功能：

vue 复制代码

<template>
  <view class="container">
    <!-- 下拉选择器 -->
    <view class="picker-container">
      <picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
        <view class="picker">
          <uni-icons type="arrowdown" size="20" color="#666" class="picker-icon"></uni-icons>
          <text class="picker-text">{{ array[index].name }}</text>
        </view>
      </picker>
    </view>

    <!-- 获取源码地址按钮 -->
    <button v-if="showButton" class="source-button" @click="handleGetSourceCode">
      <uni-icons type="download" size="20" color="#fff" class="button-icon"></uni-icons>
      <text>获取源码地址</text>
    </button>

    <!-- 显示链接 -->
    <view v-if="showLink" class="link-container">
      <uni-icons type="link" size="20" color="#007aff" class="link-icon"></uni-icons>
      <text class="link-label">源码地址：</text>
      <text class="link">{{ array[index].link }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      array: [
        { name: '请选择项目', link: '' },
        { name: '选项1', link: 'https://example.com/option1' },
        { name: '选项2', link: 'https://example.com/option2' },
        { name: '选项3', link: 'https://example.com/option3' },
        { name: '选项4', link: 'https://example.com/option4' }
      ],
      index: 0,
      showButton: false,
      showLink: false,
      videoAd: null, // 激励视频广告实例
    };
  },
  onLoad() {
    this.initVideoAd(); // 初始化激励视频广告
  },
  methods: {
    // 初始化激励视频广告
    initVideoAd() {
      if (wx.createRewardedVideoAd) {
        this.videoAd = wx.createRewardedVideoAd({
          adUnitId: '**********************' // 替换为你的广告单元 ID
        });

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

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

        // 监听广告关闭事件
        this.videoAd.onClose((res) => {
          if (res && res.isEnded) {
            console.log('用户看完了广告');
            this.showLink = true; // 显示链接
          } else {
            console.log('用户未看完广告');
            uni.showToast({
              title: '请完整观看广告以获取链接',
              icon: 'none',
            });
          }
        });
      } else {
        console.error('当前环境不支持激励视频广告');
      }
    },

    // 处理选择器变化
    bindPickerChange(e) {
      this.index = e.detail.value;
      this.showButton = true;
      this.showLink = false;
    },

    // 处理获取源码地址按钮点击
    handleGetSourceCode() {
      if (this.videoAd) {
        this.videoAd.show().catch(() => {
          // 失败重试
          this.videoAd.load()
            .then(() => this.videoAd.show())
            .catch((err) => {
              console.error('激励视频广告显示失败', err);
              uni.showToast({
                title: '广告加载失败，请重试',
                icon: 'none',
              });
            });
        });
      } else {
        uni.showToast({
          title: '广告未初始化',
          icon: 'none',
        });
      }
    },
  },
};
</script>

<style scoped>
/* 样式部分省略，参考前文 */
</style>

四、注意事项

广告单元 ID：确保使用正确的广告单元 ID。
测试环境：在微信开发者工具中勾选"不校验合法域名"选项，以便测试广告功能。
真机调试：广告功能需要在真机上测试，开发者工具中可能无法预览广告。