经过客户的进一步需求:启动页要可以跳转网页,并且网页内浏览不能自动返回到我们的程序,这时候,上一篇文章用js跳转webView的方式就实现不了了,因为没法监听html返回的数据,这时怎么办呢,我们可以按照普通跳转网页的做法来实现,继续看吧~
//app.vue
async onLaunch() {
//启动页
uni.navigateTo({
url:`/pages/secondary/bootPage/bootPage`
})
}
//bootPage.vue
<template>
<view class="bootPage">
<div class="content">
<div class="con">
<img id="img" :src="imgUrl" @click="onSkipWeb">
</div>
<div class="btn" id="timer">
<div id="info">跳过</div>
<div class="circleProgress_wrapper btn" @click="onSkip">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
</div>
</div>
<web-view v-if="skipUrl" :src="skipUrl"></web-view>
</view>
</template>
<script>
//后端接口,获取启动页数据
import {
openAd
} from "../../../../api/index.js"
export default {
data() {
return {
imgUrl: '', //启动页图片
skipUrl: '',//网页链接
optUrl: '', //暂存网页链接
isGoWeb: false, //是否跳转网页
timer: '',
token: '',
}
},
onLoad() {
this.getOpenAd()
this.token = uni.getStorageSync('token')
},
onUnload() {
clearTimeout(this.timer)
},
watch: {
//监听是否跳转网页,如果跳转,清空计时器,不然会跳转到程序首页
isGoWeb(newVal, oldVal) {
if (newVal) {
clearTimeout(this.timer)
}
},
},
methods: {
onSkip() {
uni.reLaunch({
url: '/pages/index/index'
})
},
//获取启动页数据
async getOpenAd() {
const res = await openAd({})
const {
code,
data
} = res.data
if (code == 1) {
this.imgUrl = data.image
this.optUrl = data.url
//设置计时器
this.timer = setTimeout(() => {
clearTimeout(this.timer)
//因为我的程序是需要登录的,所以这里通过判断是否有登录token,来跳转不同的页面,不然跳转到首页监听到未登录又会跳转到登录页;具体跳转根据自己项目需求来
if (this.token) {
this.onSkip()
} else {
uni.reLaunch({
url: '/pages/authorzation/loginAndRegister/loginAndRegister'
})
}
}, 6000)
} else {
this.onSkip()
}
},
//给webView赋值,实现网页跳转
onSkipWeb() {
if (this.optUrl != '') {
this.isGoWeb = true
this.skipUrl = this.optUrl
}
},
}
}
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.bootPage {
width: 100vw;
height: 100vh;
}
.content {
width: 100%;
height: 100%;
}
.content .con {
width: 100%;
height: 100%;
font-size: 0;
display: flex;
align-items: center;
}
#img {
width: 100vw;
height: 100vh;
}
#timer {
display: inline-block;
position: fixed;
top: 40px;
right: 10px;
}
#info {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
color: #FFFFFF;
font-size: 12px;
}
.circleProgress_wrapper {
width: 36px;
height: 36px;
position: relative;
}
.wrapper {
width: 18px;
height: 36px;
position: absolute;
top: 0;
overflow: hidden;
}
.right {
right: 0;
}
.left {
left: 0;
}
.circleProgress {
width: 32px;
height: 32px;
border: 2px solid #FFFFFF;
border-radius: 50%;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
}
.rightcircle {
border-top: 2px solid #03A9F4;
border-right: 2px solid #03A9F4;
right: 0;
-webkit-animation: circleProgressLoad_right 4s linear;
/*动画停留在最后一帧*/
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
.leftcircle {
border-bottom: 2px solid #03A9F4;
border-left: 2px solid #03A9F4;
left: 0;
-webkit-animation: circleProgressLoad_left 6s linear;
/*动画停留在最后一帧*/
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
@-webkit-keyframes circleProgressLoad_right {
0% {
border-top: 2px solid #03A9F4;
border-right: 2px solid #03A9F4;
-webkit-transform: rotate(45deg);
}
50% {
border-top: 2px solid #03A9F4;
border-right: 2px solid #03A9F4;
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
-webkit-transform: rotate(225deg);
}
100% {
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left {
0% {
border-bottom: 2px solid #03A9F4;
border-left: 2px solid #03A9F4;
-webkit-transform: rotate(45deg);
}
50% {
border-bottom: 2px solid #03A9F4;
border-left: 2px solid #03A9F4;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
-webkit-transform: rotate(45deg);
}
100% {
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
-webkit-transform: rotate(225deg);
}
}
</style>
总结: 用这个方法实现会出现一个问题,webView加载前会有一两秒的白屏,如果pages.json内,首页参数放在第一的话,会出现几秒显示首页,然后又显示开屏页面,这个还没找到好的解决方法,我是把开屏页放在第一,这样这几秒显示的就是开屏页,但还会出现二次加载的情况,如果有什么好的解决方案也麻烦留言告诉我一下;
plus.navigator.closeSplashscreen();据说这个可以处理,但是我没看出来
manifest.json中splashscreen->autoclose 设置为 true，然后设置splashscreen->delay 的时间长一点，可以规避启动页过快关闭的问题,但是还是会一闪而过
