扫一扫浏览

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

未结贴
0 176
yaosean未认证 2020-12-31 09:17:03
收藏

如果是原生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)可以免费帮你解决。

最近热帖 HOT TOPIC
父元素flex之后,子元素高度自适应问题 7091
thinkphp5隐藏默认模块的一些问题 6369
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 6237
教你如果处理高并发数据不同步的问题php篇 5943
关于thinkphp5.0.x getshell漏洞的说明 5878
omnicore rpc api中文手册【usdt】 5782
PHP如何判断字符串是否为json格式 5692
tpframe新建主题 5582
【全套视频】thinkphp5视频教程 5571
使用宝塔linux面板创建FTP无法连接的解决办法(阿里云或腾讯云) 5470
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
权限那里怎么一登录别的账号就报错啊 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 5
tpframe6.0马上就要跟大家见面了,一次全新的升级 5
透析thinkphp5升级版开发框架tpframe 3
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3