更新记录

1.0.2（2025-05-29） 下载此版本

修复banner 超宽的问题

1.0.1（2025-05-29） 下载此版本

删除不需要的代码

1.0.0（2025-05-29） 下载此版本

1. 位置标记系统 每个广告位通过唯一的 position 属性标识 远程配置按位置组织，精确控制每个广告位 支持动态开启/关闭特定位置的广告
2. 双重广告类型支持 UniAD 原生广告: 横幅广告 (ad) 激励视频广告 (createRewardedVideoAd) 插屏广告 (createInterstitialAd) 自定义广告: 图片横幅广告 弹窗广告 浮动广告

平台兼容性

uni-app

其他

广告组件使用说明

概述

niubi-AD 是一个智能的广告组件，支持UniAD和自定义广告两种类型，通过位置标记实现精确的广告投放控制。广告配置通过 App.vue 从远程服务器获取，支持动态更新。

功能特性

• 位置标记控制 - 通过唯一标记精确控制广告位置
• UniAD支持 - 原生UniAD横幅、激励视频、插屏广告
• 自定义广告 - 图片+链接的自定义广告内容
• 远程配置 - 动态配置，无需更新应用
• 智能控制 - 频率控制、自动隐藏等
• 多平台兼容 - APP、H5、小程序
• 事件追踪 - 完整的广告事件回调

安装使用

1. 基础引入

<template>
  <view>
    <!-- 通过position属性指定广告位置 -->
    <niubi-AD position="homepage_banner" @adClick="handleAdClick" />
    <niubi-AD position="article_list_ad" @adLoad="handleAdLoad" />
    <niubi-AD position="course_rewarded" @adReward="handleReward" />

    <!-- 手动控制显示 -->
    <niubi-AD position="popup_ad" :auto-show="false" ref="popupAd" />
  </view>
</template>

<script>
import niubi-AD from '@/components/niubi-AD.vue'

export default {
  components: {
    niubi-AD
  },
  methods: {
    handleAdClick(data) {
      console.log('广告被点击:', data);
    },
    handleReward(data) {
      console.log('获得广告奖励:', data);
    }
  }
}
</script>

2. 组件参数

3. 组件事件

4. 组件方法

5. App.vue/main.js 修改

5.1 修改 main.js

在 main.js 中初始化全局数据：

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'

Vue.config.productionTip = false
App.mpType = 'app'

// 初始化全局数据 - 重要！
App.globalData = {
  adConfigs: null  // 广告配置存储
}

const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'

export function createApp() {
  const app = createSSRApp(App)

  // Vue3 项目在这里初始化全局数据
  app.config.globalProperties.$adConfigs = null

  return {
    app
  }
}
// #endif

5.2 修改 App.vue

在 App.vue 中添加广告配置获取逻辑：

<template>
  <!-- 你现有的模板内容 -->
</template>

<script>
export default {
  data() {
    return {
      // ... 你现有的数据

      // 添加广告配置数据
      adConfigs: {}
    }
  },
  onLaunch: function() {
    console.log('App Launch')

    // 获取广告配置 - 重要！
    this.fetchAdConfig();

    // ... 你现有的其他逻辑
  },
  methods: {
    // ... 你现有的方法

    // 添加获取广告配置方法
    fetchAdConfig() {
      uni.request({
        url: 'https://a.com/ad-config.json',  // 你的广告配置服务器地址
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && res.data) {
            this.adConfigs = { ...this.adConfigs, ...res.data };
            console.log('广告配置获取成功:', this.adConfigs);

            // 将广告配置存储到全局
            getApp().globalData.adConfigs = this.adConfigs;

            // 触发广告配置更新事件 - 通知所有广告组件
            uni.$emit('adConfigUpdated', this.adConfigs);
          }
        },
        fail: (err) => {
          console.error('获取广告配置失败:', err);
          // 使用默认配置
          getApp().globalData.adConfigs = this.adConfigs;
        }
      });
    }
  }
}
</script>

5.3 创建广告配置文件

在你的服务器上创建 ad-config.json 文件：

{
  "homepage_banner": {
    "enabled": true,
    "type": "custom",
    "ad_type": "banner",
    "image": "https://a.com/images/homepage-banner.jpg",
    "link": "/pages/promotion/index",
    "title": "首页横幅广告",
    "display_duration": 5000
  },
  "course_unlock": {
    "enabled": true,
    "type": "uniad",
    "ad_type": "rewarded",
    "unit_id": "你的UniAD广告位ID",
    "button_text": "观看广告免费解锁"
  },
  "global_float": {
    "enabled": true,
    "type": "custom",
    "ad_type": "float",
    "image": "https://a.com/images/customer-service.png",
    "link": "/pages/customer-service/index",
    "title": "客服咨询",
    "position": "bottom-right"
  }
}

5.4 集成步骤总结

2. 修改main.js: 添加全局数据初始化
3. 修改App.vue: 添加广告配置获取逻辑
4. 创建配置文件: 在服务器上部署广告配置JSON
5. 使用组件: 在需要的页面引入并使用

5.5 注意事项

• 配置文件路径: 确保 https://a.com/ad-config.json 可以正常访问
• 跨域问题: 如果是H5平台，注意配置CORS
• UniAD权限: 使用UniAD需要在manifest.json中配置相应权限
• 全局数据: getApp().globalData.adConfigs 是组件获取配置的关键

配置格式

服务器配置URL

https://a.com/ad-config.json

配置结构

{
  "位置标记": {
    "enabled": true,
    "type": "uniad|custom",
    "ad_type": "banner|popup|float|rewarded|interstitial",
    // ... 其他配置
  }
}

UniAD 配置

横幅广告

{
  "article_list_banner": {
    "enabled": true,
    "type": "uniad",
    "ad_type": "banner",
    "unit_id": "adunit-xxxxxx",
    "ad_intervals": 30
  }
}

激励视频广告

{
  "course_detail_rewarded": {
    "enabled": true,
    "type": "uniad",
    "ad_type": "rewarded",
    "unit_id": "adunit-yyyyyy",
    "button_text": "观看广告免费解锁课程"
  }
}

插屏广告

{
  "news_list_interstitial": {
    "enabled": true,
    "type": "uniad",
    "ad_type": "interstitial",
    "unit_id": "adunit-zzzzzz",
    "button_text": "查看更多新闻"
  }
}

自定义广告配置

横幅广告

{
  "homepage_banner": {
    "enabled": true,
    "type": "custom",
    "ad_type": "banner",
    "image": "https://a.com/banner.jpg",
    "link": "/pages/promotion/index",
    "title": "限时优惠活动",
    "display_duration": 5000
  }
}

弹窗广告

{
  "homepage_popup": {
    "enabled": true,
    "type": "custom",
    "ad_type": "popup",
    "image": "https://a.com/popup.jpg",
    "link": "https://a.com/offer",
    "title": "新用户专享福利",
    "description": "注册立享优惠券",
    "show_frequency": "once_per_day"
  }
}

浮动广告

{
  "global_float": {
    "enabled": true,
    "type": "custom",
    "ad_type": "float",
    "image": "https://a.com/float.png",
    "link": "/pages/customer-service/index",
    "title": "客服咨询",
    "position": "bottom-right"
  }
}

配置参数说明

通用参数

• enabled: 是否启用该广告位
• type: 广告类型 (uniad | custom)
• ad_type: 广告样式 (banner | popup | float | rewarded | interstitial)

UniAD 专用参数

• unit_id: UniAD广告位ID
• ad_intervals: 横幅广告刷新间隔（秒）
• button_text: 激励视频/插屏广告按钮文本

自定义广告参数

• image: 广告图片URL
• link: 点击跳转链接
• title: 广告标题
• description: 广告描述（仅弹窗）
• display_duration: 显示时长（毫秒，0=不自动隐藏）
• show_frequency: 显示频率 (always | once_per_day | once_per_session)
• position: 浮动位置 (bottom-right | bottom-left | top-right | top-left)

使用场景示例

首页广告布局

<template>
  <view>
    <!-- 顶部横幅 -->
    <niubi-AD position="homepage_top_banner" />

    <!-- 内容区域 -->
    <view class="content">
      <!-- 中间横幅 -->
      <niubi-AD position="homepage_middle_banner" />
    </view>

    <!-- 底部弹窗（手动控制） -->
    <niubi-AD position="homepage_popup" :auto-show="false" ref="popupAd" />

    <!-- 全局浮动客服 -->
    <niubi-AD position="global_customer_service" />
  </view>
</template>

课程详情页激励视频

<template>
  <view>
    <view class="course-content">
      <!-- 课程内容 -->
    </view>

    <!-- 激励视频解锁下一章 -->
    <niubi-AD 
      position="course_chapter_unlock" 
      @adReward="unlockNextChapter"
      @adError="showPaymentOption" />
  </view>
</template>

<script>
export default {
  methods: {
    unlockNextChapter() {
      // 用户观看完广告，解锁下一章
      this.chapterLocked = false;
    },
    showPaymentOption() {
      // 广告加载失败，显示付费选项
      uni.showModal({
        title: '提示',
        content: '观看广告失败，是否付费解锁？'
      });
    }
  }
}
</script>

注意事项

1. 位置标记唯一性: 每个 position 在应用中必须唯一
2. UniAD权限: UniAD功能需要在App平台配置相应权限
3. 网络依赖: 广告配置和图片资源依赖网络加载
4. 用户体验: 合理设置广告频率，避免过度打扰
5. 错误处理: 建议监听 adError 事件做降级处理

更新日志

• v2.0.0:

  • 支持位置标记精确控制
  • 新增UniAD支持（横幅、激励视频、插屏）
  • 重构配置结构，按位置组织
  • 增强事件系统，提供详细回调信息
  • 优化错误处理和降级机制

• v1.0.0: 初始版本，基础自定义广告功能