当前位置: 首页 > news >正文

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>

若有不妥,积极发言!

相关文章:

uniapp的启动页、开屏广告

uniapp的启动页、开屏广告 启动页配置广告开屏 启动页配置 在manifest.json文件中找到APP启动界面配置&#xff0c;可以看到有Android和iOS的启动页面的配置 &#xff0c;选择自定义启动图即可配置 广告开屏 在pages中新建一个广告开屏文件并在pases.json的最顶部配置这个页…...

基于人工势场法的航线规划

GitHub - zzuwz/Artificial-Potential-Field: 2D平面下的人工势场法 GitHub - mellody11/Artificial-Potential-Field: 机器人导航--人工势场法及其改进 matlab2020a可以运行...

在紫光同创盘古50K开发板上进行DDR读写测试

本原创文章由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处 适用于板卡型号&#xff1a; 紫光同创PGL50H开发平台&#xff08;盘古50K开发板&#xff09; 一&#xff1a;软硬件平台 软件平台&#xff1a;PDS_…...

MySQL BinLog实战应用之二

一、前言 上篇 MySQL Binlog实战应用之一 主要讲了BinLog的开启以及用MySQLBinLog读取BigLog二进制文件&#xff0c;但MySQLBinLog很难直接对接Java&#xff0c;所以有了Canal这个Alibaba开发的用于MySQL增量日志解析&#xff0c;提供增量数据的订阅和消费组件。 二、Canal原…...

Visual Studio Code 快 捷 键

个人总结 Visual Studio Code 快 捷 键&#xff01;满足日常使用&#xff0c;提高工作效率&#xff01;&#xff01; 1、搜索文件&#xff1a; Ctrl p 2、移到某一行&#xff1a; Ctrl g 一、切 换 行 注 释、切 换 块 注 释 1、行注释"//"快捷键&#xf…...

有色金属冶炼VR虚拟场景互动教学有何优势

真实模拟&#xff1a;VR虚拟现实技术可以提供一个真实的虚拟环境&#xff0c;模拟钢铁制造现场&#xff0c;包括设备、工艺流程、操作规程等&#xff0c;使学员获得直观、真实的体验。 安全可靠&#xff1a;钢铁制造技能培训可以在虚拟环境中进行&#xff0c;不会对人员或设备造…...

Python将知网导出的endnote题录转为Refworks模式

近期使用SATI文献分析系统&#xff0c;发现效果有限&#xff0c;vosviewer虽然聚类起来图片好看&#xff0c;但没有模块度以及轮廓值等评价标准&#xff0c;因此只能去找citespace&#xff0c;3000文献经过了筛选&#xff0c;重新在知网导一次太麻烦了&#xff0c;还是直接用py…...

单元测试反射注解

单元测试 就是针对最小的功能单元(方法)&#xff0c;编写测试代码对其进行正确性测试。 咱们之前是如何进行单元测试的&#xff1f;有啥问题 &#xff1f; Junit单元测试框架 可以用来对方法进行测试&#xff0c;它是由Junit公司开源出来的 具体步骤 Junit框架的常见注解…...

Android 交叉编译openssl 、libxml2静态库

openssl: Android下openssl编译和使用&#xff08;一&#xff09;_安卓编译openssl 交叉编译 for arch in armeabi-v7a arm64-v8a-CSDN博客 libxml2: LIBXML2 2.9.11 build for Android_libxml2 android静态库_fredhurui的博客-CSDN博客...

神经网络气温预测

#引用所需要的库 import numpy as np import pandas as pd import matplotlib.pyplot as plt import torch import torch.optim as optim#优化器 #过滤警告 import warnings warnings.filterwarnings(“ignore”) %matplotlib inline featurespd.read_csv(‘temps.csv’) feat…...

体验SOLIDWORKS钣金切口工具增强 硕迪科技

在工业生产制造中&#xff0c;钣金加工是一种常用的加工方式&#xff0c;在SOLIDWORKS2024新版本中&#xff0c;钣金切口工具再次增强了&#xff0c;从SOLIDWORKS 2024 开始&#xff0c; 您可以使用切口工具在空心或薄壁圆柱体和圆锥体中生成切口。 只需在现有空心或薄壁圆柱体…...

(八)Flask之app.route装饰器函数的参数

app.route参数 app.route()是Flask框架中用于定义路由的装饰器函数&#xff0c;它接受一些参数来指定路由的URL规则、请求方法等。 app.route()参数如下&#xff1a; rule&#xff08;必选&#xff09;&#xff1a;定义URL规则的字符串&#xff0c;表示要匹配的URL路径。可以…...

ES6.8集群配置注意点

x-pack配置 当启用xpack.security.enabled时&#xff0c;确保集群中的所有节点都配置了此项&#xff0c;并确保所有节点都已重启。如果只有部分节点启用安全性&#xff0c;那么集群可能会遇到问题。 设置密码 使用elasticsearch-setup-passwords工具设置密码时&#xff0c;确保…...

Powercli批量修改分布式交换机端口组

背景 需求&#xff1a; 批量修改虚拟机的分布式端口组 解决方式一&#xff1a; 三条命令解决&#xff1a;先获取目标虚拟机、获取目标端口组、修改虚拟机端口组、检查虚拟机状态。 $vm Get-VM -Name <虚拟机名称> $portGroup Get-VirtualPortGroup -Name <端口…...

ZKP10.2 Efficient Recursion via Statement Folding (Nova)

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 10: Recursive SNARKs, Aggregation and Accumulation (Dan Boneh) 10.3 Efficient Recursion via Statement Folding: Nova, Supernova, and generalizations The difficulty with full recursion Prover P needs to build a…...

高浓度cod废水怎么处理

高浓度COD废水的处理方法主要有物理法、生物法和化学法。 物理法&#xff1a;一般通过加入絮凝剂&#xff0c;利用絮凝剂的吸附、电中和等作用将水中的颗粒物结团沉降下去&#xff0c;从而达到去除部分来自颗粒物的COD。此方法基本上只对浓度上万、上千的COD起作用&#xff0c…...

Docker学习——②

文章目录 1、Docker是什么1.1 Docker本质1.2 Docker的引擎迭代1.3 Docker和虚拟机的区别1.4 Docker 为什么比虚拟机资源利用率高&#xff0c;启动快&#xff1f;1.5 Docker 和 JVM 虚拟化的区别&#xff1f; 2、Docker架构3、Docker生态3.1 新时代软件诉求3.2 Docker 解决方案 …...

VSCode 设置平滑光标

1.点击左下角的设置按钮&#xff0c;再点击设置 2.点击文本编辑器&#xff0c;点击光标&#xff0c;勾选控制是否启用平滑插入动画。 3.随便打开一个文件&#xff0c;上下左右移动光标时&#xff0c;会发现非常的流畅。 原创作者&#xff1a;吴小糖 创作时间&#xff1a;2023…...

Spring、SpringMVC、Mybatis

一.Spring基础 1.Spring 框架是什么 Spring 是一款开源的轻量级 Java 开发框架&#xff0c;我们一般说 Spring 框架指的都是 Spring Framework&#xff0c;它是很多模块的集合&#xff0c;例如&#xff0c;Spring core、Spring JDBC、Spring MVC 等&#xff0c;使用这些模块可…...

Kubernetes 架构

Kubernetes 架构 Kubernetes 最初源于谷歌内部的 Borg,提供了面向应用的容器集群部署和管理系统。Kubernetes 的目标旨在消除编排物理 / 虚拟计算,网络和存储基础设施的负担,并使应用程序运营商和开发人员完全将重点放在以容器为中心的原语上进行自助运营。Kubernetes 也提…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

【版本控制】GitHub Desktop 入门教程与开源协作全流程解析

目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork&#xff08;创建个人副本&#xff09;步骤 2: Clone&#xff08;克隆…...

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...