当前位置: 首页 > news >正文

如何在 UniApp 中集成激励奖励(流量主)

引言

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


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

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


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

1. 初始化激励视频广告

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

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() 方法弹出广告。如果广告加载失败,可以尝试重新加载并显示:

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. 广告关闭后的逻辑处理

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

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

三、完整代码示例

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

<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>

四、注意事项

  1. 广告单元 ID:确保使用正确的广告单元 ID。
  2. 测试环境:在微信开发者工具中勾选“不校验合法域名”选项,以便测试广告功能。
  3. 真机调试:广告功能需要在真机上测试,开发者工具中可能无法预览广告。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/41756.html

相关文章:

  • 3DCAPP系列:开目浏览器KMVue
  • Yi - Ai 基于NineAi2.4.2的二开版本,含编译包和整合包,无需授权,全套源码,开箱即用,支持国内外热门大模型
  • 【word】保存重开题注/交叉引用消失,全局更新域问题
  • Kafka 消息 0 丢失的最佳实践
  • HTML操作详解
  • Python可迭代对象迭代器对象
  • 2025最新版Node.js安装使用指南
  • Node.js项目启动流程以及各个模块执行顺序详解
  • springboot做接口限流
  • 基于SSM实现的bbs论坛系统功能实现四
  • JSX 的基础概述、优势与工作原理(babel解析为JS)
  • 关于 CUPTI samples 中 的 pc_sample case
  • git 的 Detached HEAD
  • Opencv 图像基本操作
  • 大白话React Hooks,新特性怎么用?
  • Diffusion Transformer(DiT)——将扩散过程中的U-Net换成ViT:近频繁用于视频生成与机器人动作预测(含清华PAD详解)
  • 从 0 到 1,用 Python 构建超实用 Web 实时聊天应用
  • C# Enumerable类 之 数据筛选
  • gradle学习-mac安装
  • 2025-02-27 学习记录--C/C++-PTA 7-31 字符串循环左移
  • hivePB级迁移方案
  • Python的那些事第三十四篇:基于 Plotly 的交互式图表与仪表板设计与应用
  • AI数字人开发,引领科技新潮流
  • MySQL—授权与权限回收
  • Vue3 Hooks:从原理到实战封装指南
  • Vue-Flow绘制流程图(Vue3+ElementPlus+TS)简单案例
  • Spring Retry 实现乐观锁重试
  • 【数据结构】二叉树(门槛极低的系统性理解)
  • React进阶之前端业务Hooks库(四)
  • 2.27-1笔记1