uniapp的启动页、开屏广告

news2025/2/27 5:21:14

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>

若有不妥,积极发言!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1158514.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式应用选择正确的系统设计方法:第三部分

产品质量低下的原因有很多&#xff0c;例如&#xff0c;产品制造粗糙&#xff0c;组件设计不当&#xff0c;架构不佳以及对产品的要求了解不多。点击领取嵌入式物联网学习路线 必须设计质量。 您不能测试出足够的错误来交付高质量的产品。的质量保证&#xff08;QA&#xff09…

Collectors.toMap报错:空指针 key重复

Java 8中的stream在项目开发中被同学们用的风生水起&#xff0c;当然大家也踩了不少坑。下面我就来说说Collections.toMap在项目使用中踩的坑&#xff0c;避免大家重复被坑。 一.介绍Collectors.toMap Collectors.toMap 是 Java 8 中的一个收集器&#xff0c;它可以将流中的元…

ArrayList简介及使用全方位手把手教学(带源码),用ArrayList实现洗牌算法,3个人轮流拿牌(带全部源码)

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信你对这篇博客也感兴趣o (ˉ▽ˉ&#xff1b;) &#x1f4dc;数据结构 —— Java自定义代码实现顺序表&#xff0c;包含测试用例以及ArrayList的使用以及相关算法题(带完整源码) 目录 ArrayList简介 Arra…

Spring Security 6.1.x 系列(2)—— 基于过滤器的基础原理(一)

一、过滤器 Spring Security 的 Servlet 支持基于 Servlet 过滤器&#xff0c;因此首先了解过滤器的作用会很有帮助。 下图为单个 HTTP 请求的处理程序的典型分层。 客户端向应用程序发送一个请求&#xff0c;运行容器创建一个FilterChain&#xff08;过滤链&#xff09;&…

Thinkphp6项目在虚拟机无法指向pulic的目录访问的方法

以阿里云虚拟主机为例&#xff0c;服务器环境为 LAMP&#xff0c;Apache2.4 php7.2 mysql5.7 1.根目录新建 index.php 文件&#xff0c;将以下内容放入文件中 <?php include ./public/index.php;2.将 public 目录下的 admin.php、backend 文件夹、static 文件夹、tinymc…

UWB 技术在机器人和移动领域的应用题】

多年来&#xff0c;机器人生态系统不断增长&#xff0c;不同的应用程序也在不断增长。如今&#xff0c;机器人出现在许多不同的领域&#xff0c;例如私人家庭、商业场所、仓库和医疗场所。他们要么自主工作&#xff0c;要么与我们并肩工作&#xff0c;帮助我们完成任务。 根据…

Web APIs——日期对象的使用

1、日期对象 日期对象&#xff1a;用来表示时间的对象 作用&#xff1a;可以得到当前系统时间 1.1实例化 在代码中发现了new关键字时&#xff0c;一般将这个操作称为实例化 创建一个时间对象并获取时间 获得当前时间 const date new Date() <script>// 实例化 new //…

R语言的DICE模型实践技术

随着温室气体排放量的增大和温室效应的增强&#xff0c;全球气候变化问题受到日益的关注。我国政府庄严承诺在2030和2060年分别达到“碳达峰”和“碳中和”&#xff0c;因此气候变化和碳排放已经成为科研人员重点关心的问题之一。气候变化问题不仅仅是科学的问题&#xff0c;同…

php得到两个数组之间的差集、并集、交集方法

1、差集&#xff1a; array_diff()函数用于返回在第一个数组中存在&#xff0c;但在其他数组中不存在的值。 $array1 [1, 2, 3, 4, 5]; $array2 [4, 5, 6, 7, 8]; $diff array_diff($array1, $array2); print_r($diff); 输出&#xff1a;Array ( [0] > 1 [1] > 2 [2]…

网络安全(黑客)-小白自学

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

学习笔记|两独立样本秩和检验|曼-惠特尼 U数据分布图|规范表达|《小白爱上SPSS》课程:SPSS第十二讲 | 两独立样本秩和检验如何做?

目录 学习目的软件版本原始文档两独立样本秩和检验一、实战案例二、统计策略三、SPSS操作1、正态性检验2、两样本秩和检验 四、结果解读疑问&#xff1a;曼-惠特尼 U数据分布图如何绘制&#xff1f; 五、规范报告1、规范表格2、规范文字 六、划重点 学习目的 SPSS第十二讲 | 两…

Linux根目录下的目录结构及其作用详解

Linux根目录是文件系统的最顶层&#xff0c;它包含了一些子目录&#xff0c;每个子目录都有特定的功能和存储的文件。只有了解了各个文件的使用功能&#xff0c;才能更好的去使用Linux系统。希望通过下面这张图能够让你更加了解根目录下的各个目录的功能。

Redis通过复制rdb文件方式同步线上数据到本地以及提示:Can‘t handle RDB format version 9解决

场景 Redis的持久化机制-RDB方式和AOF方式&#xff1a; Redis的持久化机制-RDB方式和AOF方式_rdb 和ao-CSDN博客 Redis持久化机制导致服务自启动后恢复数据过长无法使用以及如何关闭&#xff1a; Redis持久化机制导致服务自启动后恢复数据过长无法使用以及如何关闭_霸道流氓…

「直播回放」使用 PLC + OPC + TDengine,快速搭建烟草生产监测系统

在烟草工业场景里&#xff0c;多数设备的自动控制都是通过 PLC 可编程逻辑控制器来实现的&#xff0c;PLC 再将采集的数据汇聚至 OPC 服务器。传统的 PI System、实时数据库、组态软件等与 OPC 相连&#xff0c;提供分析、可视化、报警等功能&#xff0c;这类系统存在一些问题&…

OpenCV标定演示,及如何生成标定板图片

标定的程序在官方的源码里有&#xff0c; opencv-4.5.5\samples\cpp\tutorial_code\calib3d\camera_calibration 很多小白不知道怎么跑起来&#xff0c;这个也怪OpenCV官方&#xff0c;工作没做完善&#xff0c;其实的default.xml是要自己手动改的&#xff0c;输入的图片也要…

MySQL -- 内置函数

MySQL – 内置函数 文章目录 MySQL -- 内置函数一、日期函数1.current_date()获取年月日2.current_time()获取时分秒3.current_timestamp() / now()获得时间戳4.date_add()在日期的基础上加日期5.date_sub()在日期的基础上减去日期6. datediff()计算两个日期之间相差多少天7.案…

给两个字符串,在第一字符串中删除第二个字符串中所包含的所有字符(Java版)

题目描述&#xff1a; 给定两个字符串&#xff1a;s1和s2 s1:welcome to world s2:come 要求在输出的结果中将s1中存在的s2的字符删除。 最终输出的结果&#xff1a;wl t wrld 这里将会用到数组来解决此问题。 首先&#xff0c;定义一个数组ArrayList(),其次将两个对比的字符串…

微服务框架SpringcloudAlibaba+Nacos集成RabbitMQ

目前公司使用jeepluscloud版本&#xff0c;这个版本没有集成消息队列&#xff0c;这里记录一下&#xff0c;集成的过程&#xff1b;这个框架跟ruoyi的那个微服务版本结构一模一样&#xff0c;所以也可以快速上手。 1.项目结构图&#xff1a; 配置类的东西做成一个公共的模块 …

unity 点击3D物体

1. 在场景中添加事件系统 2. 为主相机添加射线检测 3. 为物体挂载以下脚本&#xff0c;物体必须带碰撞体 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems;// 挂在物体上&#xff0c;需要添加碰撞体 public …

遥遥领先一个量级,平头哥发布首颗SSD主控芯片镇岳510

11月1日&#xff0c;在2023云栖大会上&#xff0c;阿里巴巴平头哥发布旗下首颗SSD主控芯片镇岳510&#xff0c;该芯片为云计算场景深度定制&#xff0c;实现4μs超低时延&#xff0c;比业界主流降低30%以上&#xff0c;误码率低至10^-18&#xff0c;比业内标杆领先一个数量级。…