uniapp如何做开屏广告，我分享两种方案解决

如果是原生app开发，这个倒是不难，如果是uniapp开发app，又如何做开屏广告呢？我这里提供两种方案实现

第一种方案

独立做一个广告幻灯片或视频等广告页面，例如pages/guide/guide

启动页面判断，是否是第一次加载（通过缓存判断），如果是就展示广告，否则跳转到首页

pages.json文件这样配置

	{
	"pages": [
		{
			"path":"pages/expand/entry/guide",
			"style":{
				"navigationStyle":"custom"
			}
		},
		{
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "tpframe商城",
				"navigationStyle":"custom",
				"navigationBarTextStyle":"black"
			}
		},
		
		// .....
	}

广告页面代码

<template>
    <view class="page">
        <swiper
		  class="swiper"
		  :indicator-dots="true" 
		  :current="tabIndex"
		  :indicator-active-color="'#f5f5f5'"
		  @change="changeTab">
            <swiper-item
				class="item"
				v-for="(item, index) in guidelList" :key="index">
                <image :src="item.src" class="thumb" mode="aspectFill"></image>
				<view class="button" v-if="index==guidelList.length-1" @tap="buttonTap">立即体验</view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default{
	data(){
		return {
			tabIndex:0,
			guidelList:[

			]
		}
	},
	onLoad() {
		if(this.$Helper.getCache("launchGuideFlag")){
			this.$Helper.setCache("launchGuideFlag",true,365*3600*24);
			this.$Helper.tpfJumpReLaunch({url:"/pages/home/tab-bar"});
			return false;
		}
		this.getGuideList();
	},
	methods:{
		changeTab(e){
			console.log(e);
		},
		buttonTap(){
			this.$Helper.setCache("launchGuideFlag",true,365*3600*24);
			this.$Helper.tpfJumpReLaunch({url:"/pages/home/tab-bar"});
		},
		getGuideList(){
			this.$Request.requestAll("/index/getGuide").then(res=>{
				this.guidelList = res.data;
			});
		}
	}
}
</script>

<style lang="scss">
.page{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.swiper{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	.item{
		position: relative;
	}
	.button{
		position: absolute;
		bottom:100rpx;
		width:200rpx;
		line-height: 90rpx;
		border-radius: 60rpx;
		background-color: rgba($color: #FFFFFF, $alpha:0.8);
		text-align: center;
		left: 50%;
		margin-left: -100rpx;
		color: #666;
	}
}
.thumb{
	width: 100vw;
	height: 100vh;
}
</style>

当然你也可以刚开始就进行首页(判断是否是第一次加载)--如果是-->广告页--->返回首页，如果不是就不做任何操作

第二种方式

第二种方式就是写子窗口，官方文档可看这里：https://uniapp.dcloud.io/collocation/pages?id=app-subnvues

具体实现思路：
加载首页的时候判断是否是第一次加载，如果不是就不管，如果是就显示原生子窗口，原生子窗口就是一个页面，你可以在里面定义任意你想要的内容

pages.json配置示例

{
	"pages": [{
        "path": "pages/home/home", //首页
        "style": {
            "app-plus": {
                "titleNView": false , //禁用原生导航栏
                "subNVues":[{//侧滑菜单
                    "id": "guide", //subNVue 的 id，可通过 uni.getSubNVueById('guide') 获取
                    "path": "pages/home/guide.nvue", // nvue 路径
                    "style": { //webview style 子集，文档可暂时开放出来位置，大小相关配置
                        "position": "popup", //除 popup 外，其他值域参考 5+ webview position 文档
                        "width": "1000%",
                        "height": "1000%"
                    }

                }

              }
             // .... 
        ]
}

第一次展示后，点击子窗口隐藏即可

这是我想到的两种方案，满足基本的功能是没有问题的，如果做的过程中有什么问题加我微信（cqtouquan）可以免费帮你解决。