当前位置: 首页 > 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>

若有不妥,积极发言!

http://www.lryc.cn/news/216367.html

相关文章:

  • 基于人工势场法的航线规划
  • 在紫光同创盘古50K开发板上进行DDR读写测试
  • MySQL BinLog实战应用之二
  • Visual Studio Code 快 捷 键
  • 有色金属冶炼VR虚拟场景互动教学有何优势
  • Python将知网导出的endnote题录转为Refworks模式
  • 单元测试反射注解
  • Android 交叉编译openssl 、libxml2静态库
  • 神经网络气温预测
  • 体验SOLIDWORKS钣金切口工具增强 硕迪科技
  • (八)Flask之app.route装饰器函数的参数
  • ES6.8集群配置注意点
  • Powercli批量修改分布式交换机端口组
  • ZKP10.2 Efficient Recursion via Statement Folding (Nova)
  • 高浓度cod废水怎么处理
  • Docker学习——②
  • VSCode 设置平滑光标
  • Spring、SpringMVC、Mybatis
  • Kubernetes 架构
  • python---数据类型(列表)
  • CentOS 7升级gcc/G++版本
  • uni-app开发微信公众号 H5打开扫一扫功能
  • k8s-服务网格实战-入门Istio
  • 金属压铸件自动化3D全尺寸测量设备自动外观检测三维检测-CASAIM
  • Android笔记(十):结合Navigation组件实现Compose界面的导航
  • linux内核tcp配置--断网后连接卡住
  • Apache Pulsar 在腾讯云上的最佳实践
  • VMware 虚拟机安装 CentOS 7
  • UnityAI——个体AI角色的操控行为脚本
  • ssh登录界面变成vim提示,进不去系统