經(jīng)過客戶的進一步需求:啟動頁要可以跳轉(zhuǎn)網(wǎng)頁,并且網(wǎng)頁內(nèi)瀏覽不能自動返回到我們的程序,這時候,上一篇文章用js跳轉(zhuǎn)webView的方式就實現(xiàn)不了了,因為沒法監(jiān)聽html返回的數(shù)據(jù),這時怎么辦呢,我們可以按照普通跳轉(zhuǎn)網(wǎng)頁的做法來實現(xiàn),繼續(xù)看吧~
//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>
//后端接口,獲取啟動頁數(shù)據(jù)
import {
openAd
} from "../../../../api/index.js"
export default {
data() {
return {
imgUrl: '', //啟動頁圖片
skipUrl: '',//網(wǎng)頁鏈接
optUrl: '', //暫存網(wǎng)頁鏈接
isGoWeb: false, //是否跳轉(zhuǎn)網(wǎng)頁
timer: '',
token: '',
}
},
onLoad() {
this.getOpenAd()
this.token = uni.getStorageSync('token')
},
onUnload() {
clearTimeout(this.timer)
},
watch: {
//監(jiān)聽是否跳轉(zhuǎn)網(wǎng)頁,如果跳轉(zhuǎn),清空計時器,不然會跳轉(zhuǎn)到程序首頁
isGoWeb(newVal, oldVal) {
if (newVal) {
clearTimeout(this.timer)
}
},
},
methods: {
onSkip() {
uni.reLaunch({
url: '/pages/index/index'
})
},
//獲取啟動頁數(shù)據(jù)
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,來跳轉(zhuǎn)不同的頁面,不然跳轉(zhuǎn)到首頁監(jiān)聽到未登錄又會跳轉(zhuǎn)到登錄頁;具體跳轉(zhuǎn)根據(jù)自己項目需求來
if (this.token) {
this.onSkip()
} else {
uni.reLaunch({
url: '/pages/authorzation/loginAndRegister/loginAndRegister'
})
}
}, 6000)
} else {
this.onSkip()
}
},
//給webView賦值,實現(xiàn)網(wǎng)頁跳轉(zhuǎn)
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>
總結: 用這個方法實現(xiàn)會出現(xiàn)一個問題,webView加載前會有一兩秒的白屏,如果pages.json內(nèi),首頁參數(shù)放在第一的話,會出現(xiàn)幾秒顯示首頁,然后又顯示開屏頁面,這個還沒找到好的解決方法,我是把開屏頁放在第一,這樣這幾秒顯示的就是開屏頁,但還會出現(xiàn)二次加載的情況,如果有什么好的解決方案也麻煩留言告訴我一下;
plus.navigator.closeSplashscreen();據(jù)說這個可以處理,但是我沒看出來
manifest.json中splashscreen->autoclose 設置為 true即横，然后設置splashscreen->delay 的時間長一點噪生，可以規(guī)避啟動頁過快關閉的問題,但是還是會一閃而過
