更新记录

1.0.0（2026-01-27）

2026.1.27

v1.0.0首次发布插件

平台兼容性

uni-app(4.87)

ray-adRewardButton

**组件名：ray-adRewardButton

插件主要功能

1、支持常用的微信、抖音、快手小程序流量主广告：激励视频广告、插屏广告

2、按钮自定义参数多，高度自定义

3、可绑定页面内一个输入框，验证输入内容是否合法，验证通过后才播放激励视频广告，否则弹出提示内容

4、同类型广告可配置多个广告ID，插件会随机选择一个展示广告，尽可能获得广告的有效展示

5、插屏广告在页面切换时展示，可设置展示几率(0-100)

注意事项

(1)编译前建议先配置好小程序APPID

(2)为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的文档，可以帮你避免一些错误。

(3)广告ID建议在后台配置，方便灵活(也可以参照下面基本方法配置)，后台数据表字段说明,建议按照下面设置:

广告ID字段名-->adid 广告类型字段名-->type （数据库表中type值：广告类型:2=激励视频,3=插屏广告） 广告类型id字段名-->typeid (快手用) 平台字段名-->platform （数据库表中platform值：平台类型:douyin=抖音,***=微信,kuaishou=快手）

创建数据库表脚本

------------------------------------------

CREATE TABLE `adconfig` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`adid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '广告id',

`type` enum('2','3') CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '广告类型:2=激励视频,3=插屏广告',

`typeid` int(11) NULL DEFAULT NULL COMMENT '快手广告类型ID',

`platform` enum('douyin','') CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '平台类型:douyin=抖音,=微信',

`maxcount` int(10) NULL DEFAULT 10 COMMENT '每天观看次数',

PRIMARY KEY (`id`) USING BTREE

) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '广告配置' ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

------------------------------------------

基本用法

在 template 中直接使用组件

<template>
    <!-- 广告组件 -->
    <ray-AdRewardButton
    ref="adRewardRef"
    :visible="true"
    :button-text="'看广告赢金币'"
    :button-width="'280rpx'"
    :button-height="'70rpx'"
    :button-font-size="'26rpx'"
    :button-color="'#9C27B0'"
    :button-text-color="'#FFFFFF'"
    :button-border-radius="'35rpx'"

    :interstitial-probability="40"
    :startup-block-interstitial-time="10"
    :interstitial-interval-time="20"

    // 发放奖励逻辑   
    :giveReward="giveReward"
    //广告ID
    :adList="adConfigs"
    //字段映射
    :field-mapping="fieldMapping"
    >
    </ray-AdRewardButton>
</template>

const adRewardRef = ref(null)
// 广告ID配置数据,建议从后台获取，更灵活方便，后台数据表字段可自定义，需要在fieldMapping中配置与组件字段映射
const adConfigs = ref([
  // 抖音激励视频广告
  {
    adid: 'kbj7co98gc6o0byl4w',
    type: '2',
    platform: 'douyin',
    maxcount: 10
  },
  // 抖音插屏广告
  {
    adid: 'wkgjtt9m33ooppija0',
    type: '3',
    platform: 'douyin',
    maxcount: 10
  },
  // 快手激励视频广告
  {
    adid: '100187975',
    type: '2',
    typeid: '100011056',
    platform: 'kuaishou',
    maxcount: 2
  },
  // 快手插屏广告
  {
    adid: '100187981',
    type: '3',
    typeid: '100033847',
    platform: 'kuaishou',
    maxcount: 2
  }
])

//后台广告ID的配置与组件字段映射（如果后台字段名不同），用于适配不同后台字段名，
const fieldMapping = {
  adId: 'adid',         // 后台表字段广告ID字段名adid（快手使用）
  type: 'type',         // 后台表广告类型字段名type（数据库表中type值：广告类型:2=激励视频,3=插屏广告）
  typeid: 'typeid',     // 后台表广告类型id字段名typeid（快手用）
  platform: 'platform', // 后台表平台字段名platform（数据库表中type值：平台类型:douyin=抖音,***=微信,kuaishou=快手）
  maxCount: 'maxcount'  // 后台表每个广告ID每天最大展示次数maxcount
}

const giveReward = () => {
  console.log('发放奖励')
  // 发放奖励逻辑
}       

API

Props

Events