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>

若有不妥,积极发言!

相关推荐
hunzi_132 分钟前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙3 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
goto_w4 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白4 小时前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
Json____15 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
web_Hsir1 天前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir1 天前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa1 天前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘1 天前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界2 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比