跟老姚学前端,课程体系更完善,10%基础 + 90%实战演练,快人一步学编程

扫一扫浏览

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

未结贴
1 1126
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)可以免费帮你解决。

  • yu丹 yu丹 371
    2021-02-05 16:17:52

    你微信多少啊


    回复
最近热帖 HOT TOPIC
【全套视频】thinkphp5视频教程 17688
父元素flex之后,子元素高度自适应问题 7940
thinkphp5隐藏默认模块的一些问题 7088
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 6919
教你如果处理高并发数据不同步的问题php篇 6602
omnicore rpc api中文手册【usdt】 6494
关于thinkphp5.0.x getshell漏洞的说明 6448
PHP如何判断字符串是否为json格式 6414
使用宝塔linux面板创建FTP无法连接的解决办法(阿里云或腾讯云) 6086
api接口文档插件easydoc的基本用法,快速搞定接口文档 6022
月度热议HOT COMMENTS
【全套视频】thinkphp5视频教程 33
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