当前位置：首页 > uni-app

uniapp弹窗式广告

2026-02-06 08:13:19uni-app

uniapp弹窗式广告的实现方法

在uniapp中实现弹窗式广告可以通过多种方式完成，包括使用原生组件、第三方插件或自定义组件。以下是几种常见的实现方案：

使用uni-popup组件

uniapp官方提供了uni-popup组件，支持多种弹窗形式（居中、底部、顶部等）。安装方式如下：

uniapp弹窗式广告

npm install @dcloudio/uni-ui

在页面中使用示例：

<template>
  <view>
    <button @click="openPopup">打开弹窗广告</button>
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <image src="/static/ad.jpg"></image>
        <button @click="closePopup">关闭</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
export default {
  components: { uniPopup },
  methods: {
    openPopup() {
      this.$refs.popup.open()
    },
    closePopup() {
      this.$refs.popup.close()
    }
  }
}
</script>

自定义弹窗组件

可以创建完全自定义的弹窗组件，通过v-if或v-show控制显示状态：

uniapp弹窗式广告

<template>
  <view>
    <button @click="showAd = true">显示广告</button>
    <view class="custom-popup" v-if="showAd">
      <view class="ad-content">
        <!-- 广告内容 -->
        <button @click="showAd = false">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showAd: false
    }
  }
}
</script>

<style>
.custom-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.ad-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}
</style>

第三方广告SDK集成

对于商业广告，可以接入第三方广告平台如穿山甲、腾讯优量汇等。通常需要在manifest.json中配置SDK信息，并在页面中调用相应API：

// 示例代码（具体以各平台文档为准）
const ad = uni.createInterstitialAd({
  adUnitId: 'your-ad-unit-id'
})
ad.show()

定时显示广告逻辑

可以通过定时器控制广告显示频率：

export default {
  onShow() {
    const lastShowTime = uni.getStorageSync('lastAdTime')
    const now = Date.now()
    if (!lastShowTime || now - lastShowTime > 3600000) {
      this.showAd = true
      uni.setStorageSync('lastAdTime', now)
    }
  }
}