uniapp的启动页、开屏广告

uniapp的启动页、开屏广告

启动页配置

在manifest.json文件中找到APP启动界面配置,可以看到有Android和iOS的启动页面的配置 ,选择自定义启动图即可配置
在这里插入图片描述

广告开屏

在pages中新建一个广告开屏文件并在pases.json的最顶部配置这个页面的路由代码如下:

"pages": [
		{
			"path": "pages/index",
			"style": {
				//取消原生导航栏
				"navigationStyle": "custom",
				"navigationBarTitleText": "启动页",
				"app-plus": {
					"titleNView": false
				}
			}
		}
		]

配置完成回到新建的index文件中编辑你想要的广告开屏内容,列如:

<template>
	<view class="guide uni-flex uni-column justify-align-center "
		:style="{ background: 'url(' + imgUrl + ')  no-repeat' }" @click="navigateTo">
		<view class="content">{{ content }}</view>
		<view class="content-wrap uni-flex justify-align-center uni-column"></view>
		<!-- 右上角跳过按钮 -->
		<!-- <view class="passbtn" @click.stop="launchApp">跳过</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			imgUrl: { // 图片路径
				type: String,
				default: '',
			}
		},
		data() {
			return {
				content: '',
				totalTime: 4,
				clock: null
			};
		},
		onLoad() {
			this.getData()
		},
		onHide() {
			clearInterval(this.clock);
		},
		methods: {
			navigateTo() {
				// clearInterval(this.clock);
			},
			getData() {
				this.clock = setInterval(() => {
					this.totalTime--;
					this.content = this.totalTime + 's后跳转';
					if (this.totalTime == 0) {
						this.launchApp()
					}
				}, 1000);
				console.log(this.clock);
			},
			launchApp() {
				//跳过引导页,储存本地值,下次进入直接跳过
				// clearInterval(this.clock);
				// this.$mRouter.push('/pages/index/index')
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		position: fixed;
		top: 60upx;
		right: 50upx;
		color: #838892;
	}

	.guide {
		height: 100%;
		height: 100%;
		position: relative;
		background-size: cover !important;
		background-position: center center !important;
	}

	.passbtn {
		width: 130upx;
		height: 60upx;
		line-height: 60upx;
		position: fixed;
		z-index: 999;
		bottom: 50upx;
		right: 50upx;
		color: #838892;
		text-align: center;
		border-width: 1upx;
		border-color: rgba(0, 0, 0, 0.5);
		border-style: solid;
		border-radius: 30upx;
		font-size: 28upx;
		padding-left: 25upx;
		padding-right: 25upx;
	}
</style>

若有不妥,积极发言!

  • 3
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值