小程序全屏弹窗广告无法覆盖导航栏和tabbar的根本原因是webview渲染层低于原生控件层，唯一解决方案是使用cover-view；其必须遵循父级约束、fixed定位、禁止混用普通节点等规则，且需配合频次控制、双保险关闭及兼容性适配。
小程序端的全屏弹窗广告盖不住导航栏和 tabbar，不是 z-index 没设够，而是 cover-view 之外的所有节点都画在 WebView 内部，天然低于原生控件层——这点必须先认清楚，否则所有 CSS 调整都是白忙。
为什么小程序里用普通 view 做全屏弹窗一定失败
微信/支付宝等小程序渲染机制决定了：view、popup、甚至 uni-popup 这类封装组件，全部走 WebView DOM 渲染路径，而导航栏、tabbar、video、canvas 是系统原生控件，层级更高。你把 z-index 设成 9999999 也没用。
- 错误现象：弹窗“浮”在页面内容上，但被 tabbar 切掉下半部分，或被导航栏压住顶部
- 真实原因：不是样式问题，是容器隔离 —— WebView 层 vs 原生层
- 唯一合法出口：只有
cover-view和cover-image能突破 WebView 边界，浮在原生组件之上
cover-view 全屏广告的硬性约束与写法
cover-view 不是万能胶，它有明确限制，不按规则写，轻则样式失效，重则整个弹窗不渲染。
- 父级必须是
cover-view或原生组件（如map、video），不能嵌套在普通view下 - 不支持
position: absolute，只能用position: fixed+top/left定位 - 子节点只能是
cover-view或cover-image，混入普通text或button会直接消失 - 不支持渐变背景、
transform、复杂 flex（比如justify-content: space-between可能错位）
正确结构示例：
<cover-view class="ad-mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7);"><cover-view class="ad-content" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; background: #fff;"><cover-image :src="adImage" style="width: 100%; height: 400rpx;"></cover-image><cover-view class="ad-close" style="position: absolute; top: 20rpx; right: 20rpx; width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; font-size: 32rpx;">✕</cover-view></cover-view></cover-view>
个性化控制：频次、关闭逻辑、跳转行为
个性化不是指 UI 多炫，而是用户行为可感知、可响应、不骚扰。核心靠三件事落地：
- 频次控制必须用
uni.setStorageSync记录时间戳，不能依赖服务端时间（小程序本地时钟可能不准），判断逻辑写在onLoad里，避免页面切换时重复触发 - 关闭动作要双保险：
@click="closeAd"绑在遮罩层上，内部内容加@click.stop阻止冒泡，否则点图片也会关掉 - 跳转必须区分场景：
uni.navigateToMiniProgram用于跳其他小程序，uni.navigateTo用于跳本应用页面；跳转前调用closeAd，避免跳转后弹窗残留
关键代码片段：
onLoad() {
const last = uni.getStorageSync('lastFullAdTime');
const now = Date.now();
if (!last || now - last > 24 * 60 * 60 * 1000) {
this.showAd();
}
},
methods: {
closeAd() {
this.visible = false;
uni.setStorageSync('lastFullAdTime', Date.now());
},
onAdClick() {
uni.navigateToMiniProgram({
appId: 'wx1234567890abcdef',
path: 'pages/index/index'
});
this.closeAd();
}
}
容易被忽略的兼容细节
看似写完就能跑，但实际发布后常因几个小点翻车：
-
cover-view在 iOS 微信 8.0.33+ 版本中对transform支持不稳定，建议改用top/left+ 百分比宽高手动居中 - 广告图尺寸建议固定为 750rpx 宽、1200rpx 高，避免不同机型拉伸变形；体积控制在 80KB 以内，否则首屏加载延迟明显
- 如果页面本身用了
navigationStyle: "custom"，cover-view的 top 值需加上状态栏高度（uni.getSystemInfoSync().statusBarHeight），否则顶部被遮挡
最麻烦的其实是“关闭后再次进入页面是否重弹”——这个逻辑必须严格绑定到页面生命周期，而不是组件 mounted，否则 tabbar 切换时会误触发。
