更新记录

1.0（2025-05-08）

v1.0

平台兼容性

引入插件

// 引入插件方法
import {
  showBannerAd,
  showInterstitialAd,
  showRewardedAd
} from '@/js_sdk/index.js';

显示横幅广告（Banner）

// 例如在页面加载时显示
onLoad() {
  const bannerAdUnitId = 'ca-app-pub-3940256099942544/6300978111'; // 测试ID，需替换成你的
  showBannerAd(bannerAdUnitId);
}

显示插屏广告（Interstitial）

// 某个交互事件触发
handleShowInterstitial() {
  const interstitialAdUnitId = 'ca-app-pub-3940256099942544/1033173712'; // 测试ID
  showInterstitialAd(interstitialAdUnitId);
}

显示激励视频广告（Rewarded）

// 用户点击按钮后触发
handleRewardAd() {
  const rewardedAdUnitId = 'ca-app-pub-3940256099942544/5224354917'; // 测试ID
  showRewardedAd(rewardedAdUnitId, (result) => {
    if (result === 'success') {
      uni.showToast({ title: '获得奖励！', icon: 'success' });
      // 给用户发奖励
    }
  });
}

完整示例

<!-- pages/index/index.vue -->
<script>
import {
  showBannerAd,
  showInterstitialAd,
  showRewardedAd
} from '@/js_sdk/index.js'; // 根据你的路径调整

export default {
  onLoad() {
    showBannerAd('你的横幅广告位ID');
  },
  methods: {
    showInterstitial() {
      showInterstitialAd('你的插屏广告位ID');
    },
    showRewarded() {
      showRewardedAd('你的激励广告位ID', (res) => {
        console.log('激励广告回调:', res);
      });
    }
  }
}
</script>

vue3

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <button @click="onShowBanner">显示横幅广告</button>
    <button @click="onShowInterstitial">显示插屏广告</button>
    <button @click="onShowRewarded">显示激励广告</button>
  </view>
</template>

<script setup>
import {
  showBannerAd,
  showInterstitialAd,
  showRewardedAd
} from '@/js_sdk/index.js'  // 如果你插件是放在 js_sdk 中

// 横幅广告
const onShowBanner = () => {
  const bannerId = 'ca-app-pub-3940256099942544/6300978111' // 测试ID
  showBannerAd(bannerId)
}

// 插屏广告
const onShowInterstitial = () => {
  const interstitialId = 'ca-app-pub-3940256099942544/1033173712'
  showInterstitialAd(interstitialId)
}

// 激励广告
const onShowRewarded = () => {
  const rewardedId = 'ca-app-pub-3940256099942544/5224354917'
  showRewardedAd(rewardedId, (result) => {
    if (result === 'success') {
      uni.showToast({ title: '奖励已获得', icon: 'success' })
    }
  })
}
</script>

<style>
.container {
  padding: 40rpx;
}
button {
  margin-bottom: 30rpx;
}
</style>

如果你还需要支持某些广告监听（比如激励完成后发金币）或需要在自定义组件中调用

// composables/useAdMob.js

import {
  showBannerAd,
  showInterstitialAd,
  showRewardedAd
} from '@/js_sdk/index.js'

export function useAdMob() {
  const showBanner = (adUnitId) => {
    if (!adUnitId) return console.warn('请传入横幅广告位 ID')
    showBannerAd(adUnitId)
  }

  const showInterstitial = (adUnitId) => {
    if (!adUnitId) return console.warn('请传入插屏广告位 ID')
    showInterstitialAd(adUnitId)
  }

  const showRewarded = (adUnitId, onReward) => {
    if (!adUnitId) return console.warn('请传入激励广告位 ID')
    showRewardedAd(adUnitId, (res) => {
      if (res === 'success' && typeof onReward === 'function') {
        onReward()
      }
    })
  }

  return {
    showBanner,
    showInterstitial,
    showRewarded
  }
}

在页面中使用 useAdMob

<script setup>
import { useAdMob } from '@/composables/useAdMob.js'

const { showBanner, showInterstitial, showRewarded } = useAdMob()

// 示例广告位 ID（请换成你的）
const bannerId = 'ca-app-pub-3940256099942544/6300978111'
const interstitialId = 'ca-app-pub-3940256099942544/1033173712'
const rewardedId = 'ca-app-pub-3940256099942544/5224354917'

onMounted(() => {
  showBanner(bannerId)
})

const showInterstitialAd = () => {
  showInterstitial(interstitialId)
}

const showRewardedAd = () => {
  showRewarded(rewardedId, () => {
    uni.showToast({ title: '奖励已到账', icon: 'success' })
  })
}
</script>