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>

若有不妥，积极发言！