【uniapp开发小程序】设置开屏广告，广告图片全屏、覆盖自带胶囊导航

news2024/10/6 2:30:13

效果图：

点击跳转其他小程序：

uni.navigateToMiniProgram()

官方文档：uni.navigateToMiniProgram(OBJECT) | uni-app官网

// 示例代码
uni.navigateToMiniProgram({
  appId: '',
  path: 'pages/index/index?id=123',
  extraData: {
    'data1': 'test'
  },
  success(res) {
    // 打开成功
  }
})

全屏展示图片：

"navigationStyle": "custom"

导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏

完整代码演示：

创建一个新的页面，用于显示广告页面

<template>
	<div class="ad-container">
		<div class="ad-content">
			<img src="https://5b0988e595225.cdn.sohucs.com/images/20200426/fcd7643a0b2146d58934366b6ccbf680.jpeg" alt="广告图片" class="ad-image" @click="redirectToMiniProgram">
			<div class="countdown">{{ countdown }}秒</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				countdown: 5,
				timer: null
			};
		},
		mounted() {
			this.timer = setInterval(() => {
				this.countdown--;
				if (this.countdown === 0) {
					clearInterval(this.timer);
					uni.redirectTo({
						url: '/pages/index/index' // 要跳转的首页路径
					});
				}
			}, 1000);
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			redirectToMiniProgram() {
				uni.navigateToMiniProgram({
					appId: '其他小程序的AppID', // 要跳转的小程序的AppID
					path: '/pages/index/index', // 要跳转的小程序页面路径
					extraData: {}, // 额外的数据，可选
					success(res) {
						console.log('跳转成功');
					},
					fail(err) {
						console.error('跳转失败', err);
					}
				});
			}
		}
	}
</script>

<style>
	.ad-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 全屏高度 */
	}

	.ad-content {
		text-align: center;
	}

	.ad-image {
		width: 100vw;
		height: 100vh;
	}

	.countdown {
		position: absolute;
		left: 238rpx;
		top: 74rpx;
		color: white;
		font-size: 24px;
	}
</style>