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>

若有不妥,积极发言!

相关推荐
mosen8683 小时前
uniapp中uni.scss如何引入页面内或生效
前端·uni-app·scss
lyz2468593 小时前
uniapp popup弹窗组件的自定义使用方法
uni-app
沙尘暴炒饭3 小时前
uniapp 前端解决精度丢失的问题 (后端返回分布式id)
前端·uni-app
牛牛科技3 小时前
生产管理系统PHP+Uniapp源码
uni-app
Smile_ping3 小时前
uniapp——APP读取bin文件,解析文件的数据内容(一)
uni-app·uniapp 读取文件·app端读取bin文件
CDERP-plus3 小时前
uniapp 3分钟集成轮播广告图
uni-app·erp·erp移动端
Liberty_yes3 小时前
uniapp input苹果中文键盘输入拼音直接切换输入焦点监听失效
uni-app
街尾杂货店&3 小时前
webpakc介绍
uni-app
洗发水很好用16 小时前
uniApp打包H5发布到服务器(docker)
uni-app
YUJIAN。16 小时前
使用uniapp开发微信小程序-框架搭建
微信小程序·小程序·uni-app