效果图：
点击跳转其他小程序：
官方文档：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>- 修改
manifest.json文件，将广告页面添加到页面配置中
