当前位置：首页 > uni-app

uniapp弹窗式广告

2026-03-05 10:03:21uni-app

实现弹窗式广告的方法

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

使用uni.showModal实现基础弹窗

uni.showModal({
    title: '广告',
    content: '点击查看详情',
    showCancel: true,
    success: function (res) {
        if (res.confirm) {
            console.log('用户点击确定');
            // 跳转到广告页面
            uni.navigateTo({
                url: '/pages/advert/advert'
            });
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});

自定义弹窗组件

uniapp弹窗式广告

创建一个自定义弹窗组件，可以更灵活地控制样式和行为：

创建组件文件/components/ad-popup.vue：

<template>
    <view class="popup-mask" v-if="show" @click="close">
        <view class="popup-content" @click.stop>
            <image src="/static/ad.jpg" mode="widthFix"></image>
            <view class="close-btn" @click="close">×</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        close() {
            this.$emit('close');
        }
    }
}
</script>

<style>
.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-content {
    position: relative;
    width: 80%;
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
}
.close-btn {
    position: absolute;
    top: -40rpx;
    right: -40rpx;
    width: 60rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
}
</style>

在页面中使用组件：

<template>
    <view>
        <ad-popup :show="showPopup" @close="showPopup = false"></ad-popup>
        <button @click="showPopup = true">显示广告</button>
    </view>
</template>

<script>
import adPopup from '@/components/ad-popup.vue'
export default {
    components: { adPopup },
    data() {
        return {
            showPopup: false
        }
    }
}
</script>

使用第三方广告插件

uniapp弹窗式广告

可以考虑接入官方广告联盟或第三方广告SDK：

在manifest.json中配置广告插件
按照插件文档初始化广告
在需要显示广告的地方调用API

定时显示广告

可以在App.vue中设置全局定时器，定期显示广告：

export default {
    onLaunch() {
        // 每30分钟显示一次广告
        setInterval(() => {
            uni.showModal({
                title: '特惠活动',
                content: '限时优惠，点击查看',
                success(res) {
                    if (res.confirm) {
                        uni.navigateTo({
                            url: '/pages/promotion/promotion'
                        });
                    }
                }
            });
        }, 1800000); // 30分钟
    }
}