智数互动广告聚合组件 (uniapp 版本)

说明

本项目已转换为 uniapp 兼容格式，支持在 uniapp 项目中直接使用 Vue 组件。

重要提醒

请在 uniapp 环境中使用，而不是微信小程序开发者工具！

错误 "Component constructors should be called while initialization" 是因为您在微信小程序环境中运行 Vue 组件导致的。

使用方法

1. 在页面中使用

<template>
  <!-- Banner广告 -->
  <zs-banner
    :adCode="bannerCode"
    :mediaCode="mediaCode"
    :openId="openId"
    :appIdSaas="appIdSaas"
    @bannerCallBack="handleBannerCallback"
  />

  <!-- 插屏广告 -->
  <zs-insert-screen
    :adCode="insertScreenCode"
    :mediaCode="mediaCode"
    :openId="openId"
    :appIdSaas="appIdSaas"
    @insertScreenCallBack="handleInsertScreenCallback"
  />

  <!-- 全屏广告 -->
  <zs-full-screen
    :adCode="fullScreenCode"
    :mediaCode="mediaCode"
    :openId="openId"
    :appIdSaas="appIdSaas"
    @fullScreenCallBack="handleFullScreenCallback"
  />

  <!-- 激励视频广告 -->
  <zs-incentive-video
    :adCode="incentiveVideoCode"
    :mediaCode="mediaCode"
    :openId="openId"
    :appIdSaas="appIdSaas"
    @load="handleIncentiveVideoLoad"
    @reward="handleIncentiveVideoReward"
  />

  <!-- 列表广告 -->
  <zs-list-ad
    :adCode="listAdCode"
    :mediaCode="mediaCode"
    :openId="openId"
    :appIdSaas="appIdSaas"
    @listAdCallBack="handleListAdCallback"
  />

  <!-- 视频广告 -->
  <zs-video-ad
    :adCode="videoAdCode"
    :mediaCode="mediaCode"
    :openId="openId"
    :appIdSaas="appIdSaas"
    :width="videoAdWidth"
    @videoAdCallBack="handleVideoAdCallback"
  />
</template>

<script>
import zsBanner from "zs-ad-plugin-uniapp/dist/components/banner/banner.vue";
import zsVideo from "zs-ad-plugin-uniapp/dist/components/videoAd/videoAd.vue";
import zsInsertscreen from "zs-ad-plugin-uniapp/dist/components/insertScreen/insertScreen.vue";
import zsListad from "zs-ad-plugin-uniapp/dist/components/listAd/listAd.vue";
import ZSPlugin from "zs-ad-plugin-uniapp/dist/index.js";
export default {
  components: {
    zsBanner,
    zsVideo,
    zsInsertscreen,
    zsListad,
  },

  data() {
    return {
      bannerCode: "your_banner_ad_code",
      insertScreenCode: "your_insert_screen_ad_code",
      fullScreenCode: "your_full_screen_ad_code",
      incentiveVideoCode: "your_incentive_video_ad_code",
      listAdCode: "your_list_ad_code",
      videoAdCode: "your_video_ad_code",
      mediaCode: "your_media_code",
      openId: "user_openid",
      appIdSaas: "your_app_id",
      videoAdWidth: "750",
    };
  },
  methods: {
    handleBannerCallback(data) {
      console.log("Banner回调:", data);
      // 处理广告跳转逻辑
    },
    handleInsertScreenCallback(data) {
      console.log("插屏回调:", data);
      // 处理广告跳转逻辑
    },
    handleFullScreenCallback(data) {
      console.log("全屏回调:", data);
      // 处理广告跳转逻辑
    },
    handleIncentiveVideoLoad(data) {
      console.log("视频加载回调:", data);
    },
    handleIncentiveVideoReward(data) {
      console.log("激励视频奖励回调:", data);
    },
    handleListAdCallback(data) {
      console.log("列表广告回调:", data);
      // 处理广告跳转逻辑
    },
    handleVideoAdCallback(data) {
      console.log("视频广告回调:", data);
      // 处理广告跳转逻辑
    },
  },
};
</script>

组件列表

已转换的组件：

• ✅ banner.vue - Banner 广告组件
• ✅ insertScreen.vue - 插屏广告组件
• ✅ customModal.vue - 自定义弹窗组件
• ✅ fullScreen.vue - 全屏广告组件
• ✅ incentiveVideo.vue - 激励视频广告组件
• ✅ listAd.vue - 列表广告组件
• ✅ videoAd.vue - 视频广告组件

API 说明

所有组件都支持以下 props：

• adCode: 广告位 Code
• mediaCode: 媒体 Code
• openId: 用户 openid
• appIdSaas: 小程序 appid
• scene: 场景值 (可选)
• backId: 特殊 ID (可选)

事件说明

所有组件都会触发相应的事件回调，您需要在父组件中监听这些事件来处理广告跳转逻辑。

注意事项

1. 请确保在 uniapp 项目中运行，而不是微信小程序开发者工具
2. 确保已正确配置 uniapp 的广告权限
3. 广告 ID 需要在智数互动平台获取
4. 所有组件已从 CommonJS 转换为 ES6 模块格式，支持现代打包工具

更新日志