更新记录

1.0.2（2026-06-09） 下载此版本

开屏视频兼容性处理

1.0.1（2026-06-09） 下载此版本

增加版本号功能

1.0.0（2026-06-09） 下载此版本

• 首次发布，支持开屏、Banner、轮播广告组件
• 内置微信小程序与 App 端埋点支持

平台兼容性

uni-app(4.85)

WL-Track 广告组件使用文档

一个简单易用的 uniapp 广告组件库，按广告类型提供独立组件标签，自动拉取数据、渲染与埋点。

组件列表

🚀 快速对接

一、初始化埋点 SDK（必需）

在 App.vue 中初始化平台对应的埋点 SDK，并挂载到全局：

<!-- App.vue -->
<script setup lang="ts">

// #ifdef MP-WEIXIN
import { wlydTrack } from '@wlydfe/track-js'

// 初始化微信小程序埋点
wlydTrack.init({
  isProd: false,                         // 是否生产环境
  debug: true,                           // 是否开启调试
  autoTrack: true,                       // 是否自动埋点
  trackerType: 'quick_tracking_wx',      // 埋点类型
  config: {
    project: 'your_project_id',          // qt应用key
    serverUrl: 'https://your-server-url.com',  // 收数服务器地址
  },
})
// #endif

// #ifdef APP-PLUS
import * as QtAnalytics from '@/uni_modules/QT-Analytics'

const platform = uni.getSystemInfoSync().platform

// 根据不同平台初始化
if (platform === 'android') {
  QtAnalytics.init()
} else if (platform === 'ios') {
  QtAnalytics.setCustomDomain('https://your-server-url.com')
  QtAnalytics.initWithAppkey('your_app_key')
  QtAnalytics.setLogEnabled(true)
} else if (platform === 'harmony') {
  QtAnalytics.init()
}
// #endif

</script>

二、初始化广告 SDK（必需）

在完成埋点 SDK 初始化后，初始化广告 SDK：

<!-- App.vue（续） -->
<script setup lang="ts">
import { initGlobalAdSDK } from '@/uni_modules/wl-track/utils/ad-sdk'

onLaunch(() => {
  // 初始化广告 SDK
  initGlobalAdSDK({
    app_key: 'your_app_key',             // 替换为实际的应用Key（必填）
    // #ifdef MP-WEIXIN
    wlydTrack: wlydTrack,            // 微信小程序埋点实例（必填）
    // #endif
    // #ifdef APP-PLUS
    QtAnalytics: QtAnalytics,        // APP 埋点实例（必填）
    // #endif
  })
})
</script>

⚠️ 重要提示：

• 必须先初始化埋点 SDK，再初始化广告 SDK
• 微信小程序需要安装 @wlydfe/track-js 依赖
• APP 需要集成 QT-Analytics 插件
• 微信小程序必须传入 wlydTrack 参数，否则会报错
• APP 必须传入 QtAnalytics 参数，否则会报错

三、使用组件

方式一：Easycom 自动导入（推荐，已配置）

项目已在 pages.config.ts 中配置 easycom，所有页面可直接使用各广告组件，无需 import：

// pages.config.ts
easycom: {
  custom: {
    '^wl-(splash|banner|carousel)-ad$':
      '@/uni_modules/wl-track/components/wl-$1-ad.vue',
  },
}

直接在页面中使用（按广告位类型选择对应标签）：

<template>
  <view class="page">
    <!-- 开屏广告 -->
    <wl-splash-ad ad-slot-key="549" />

    <!-- Banner 广告 -->
    <wl-banner-ad ad-slot-key="550" />

    <!-- 轮播广告 -->
    <wl-carousel-ad ad-slot-key="551" />
  </view>
</template>

💡 注意：每种标签对应一种广告类型，请根据广告位类型选择正确组件；类型不匹配时会报错提示。

组件会自动：

• ✅ 获取广告数据
• ✅ 渲染对应类型的广告
• ✅ 处理加载/错误状态
• ✅ 上报埋点数据（请求、响应、曝光、点击、播放等）

💡 埋点会根据平台自动使用对应的 SDK（微信小程序用 wlydTrack，APP 用 QtAnalytics）

📱 使用示例

基础用法

开屏广告

<template>
  <wl-splash-ad
    ad-slot-key="549"
    :countdown-seconds="5"
  />
</template>

🎯 常用配置

事件监听

<template>
  <wl-splash-ad
    ad-slot-key="549"
    @close="onClose"
    @click="onClick"
    @error="onError"
  />
</template>

<script setup lang="ts">
const onClose = () => console.log('广告关闭')
const onClick = (adData) => console.log('广告点击', adData)
const onError = (error) => console.error('加载失败', error)
</script>

🔧 组件参数

支持的事件： @close @click @error @load @play @ended @request @response

支持哪些广告类型？

每种广告类型对应独立组件标签，请在页面中显式选用：

• 开屏广告 → wl-splash-ad
• Banner 广告 → wl-banner-ad
• 轮播广告 → wl-carousel-ad

🔧 其他功能

设置用户 ID

import { getGlobalAdSDK } from '@/uni_modules/wl-track/utils/ad-sdk'

const sdk = getGlobalAdSDK()
if (sdk?.global) {
  sdk.global.setGlobalProperty({
    user: {
      userId: 'user_123',
    },
  })
}

错误码