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>
若有不妥,积极发言!