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