如何在Vue.js组件中集成并展示AdMob？技术问询

你当前的代码存在几个关键问题：

• size 参数直接使用数值550错误，应使用插件提供的 admob.AD_SIZE 枚举常量
• 未设置 view 属性，导致Banner会悬浮在应用最上层，而非嵌入到组件指定位置
• 缺少组件销毁时的Banner清理逻辑，可能引发内存泄漏

以下是修正后的完整集成代码，适配NativeScript Vue场景：

<template>
  <Page ref="adContainer">
    <StackLayout>
      <!-- 页面其他内容 -->
      <Label text="页面内容区域" />
      <!-- Banner会嵌入到这个页面容器中 -->
    </StackLayout>
  </Page>
</template>

<script>
import admob from 'nativescript-admob'

export default {
  name: 'AdsPage',
  mounted() {
    // 获取当前页面的原生视图，作为Banner的挂载容器
    const nativeView = this.$refs.adContainer.nativeView
    this.createAdMobBanner(nativeView)
  },
  beforeDestroy() {
    // 组件销毁时清理Banner，避免内存泄漏
    admob.destroyBanner().then(() => {
      console.log('AdMob Banner已销毁')
    }).catch(err => {
      console.error('销毁Banner失败:', err)
    })
  },
  methods: {
    async createAdMobBanner(containerView) {
      try {
        await admob.createBanner({
          // 指定Banner挂载的原生视图，确保嵌入到组件内
          view: containerView,
          testing: true, // 测试环境开启，上线前改为false
          // 使用官方枚举设置Banner尺寸，适配不同设备
          size: admob.AD_SIZE.SMART_BANNER,
          // 测试用ID，上线替换为自己的正式ID
          androidBannerId: "ca-app-pub-3940256099942544/6300978111",
          iosBannerId: "ca-app-pub-3940256099942544/2934735716", // 可选，适配iOS
          margins: {
            bottom: 50 // Banner距离底部的间距
          }
        })
        console.log('AdMob Banner创建成功')
      } catch (error) {
        console.error('创建Banner失败:', error)
      }
    }
  }
}
</script>

关键说明：

• 使用 ref 获取页面的原生视图，通过 view 属性传递给 createBanner，让Banner嵌入到组件布局中，而非悬浮
• 尺寸使用 admob.AD_SIZE 枚举，可选值包括：SMART_BANNER（自适应屏幕宽度）、BANNER（标准320x50）、LARGE_BANNER（320x100）等
• 添加 beforeDestroy 钩子销毁Banner，避免页面销毁后Banner残留
• 移除不必要的 setTimeout，mounted 钩子执行时页面视图已初始化，可直接创建Banner

内容的提问来源于stack exchange，提问作者Sam