經(jīng)過客戶的進(jìn)一步需求:啟動(dòng)頁(yè)要可以跳轉(zhuǎn)網(wǎng)頁(yè),并且網(wǎng)頁(yè)內(nèi)瀏覽不能自動(dòng)返回到我們的程序,這時(shí)候,上一篇文章用js跳轉(zhuǎn)webView的方式就實(shí)現(xiàn)不了了,因?yàn)闆]法監(jiān)聽html返回的數(shù)據(jù),這時(shí)怎么辦呢,我們可以按照普通跳轉(zhuǎn)網(wǎng)頁(yè)的做法來(lái)實(shí)現(xiàn),繼續(xù)看吧~

//app.vue
        async onLaunch() {
            //啟動(dòng)頁(yè)
            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>
//后端接口,獲取啟動(dòng)頁(yè)數(shù)據(jù)
    import {
        openAd
    } from "../../../../api/index.js"
    export default {
        data() {
            return {
                imgUrl: '', //啟動(dòng)頁(yè)圖片
                skipUrl: '',//網(wǎng)頁(yè)鏈接
                optUrl: '', //暫存網(wǎng)頁(yè)鏈接
                isGoWeb: false, //是否跳轉(zhuǎn)網(wǎng)頁(yè)
                timer: '',
                token: '',
            }
        },
        onLoad() {
            this.getOpenAd() 
            this.token = uni.getStorageSync('token')
        },
        onUnload() {
            clearTimeout(this.timer)
        },
        watch: {
//監(jiān)聽是否跳轉(zhuǎn)網(wǎng)頁(yè),如果跳轉(zhuǎn),清空計(jì)時(shí)器,不然會(huì)跳轉(zhuǎn)到程序首頁(yè)
            isGoWeb(newVal, oldVal) {
                if (newVal) {
                    clearTimeout(this.timer)
                }
            },
        },
        methods: {
            onSkip() {
                uni.reLaunch({
                    url: '/pages/index/index'
                })
            },
//獲取啟動(dòng)頁(yè)數(shù)據(jù)
            async getOpenAd() {
                const res = await openAd({})
                const {
                    code,
                    data
                } = res.data
                if (code == 1) {
                    this.imgUrl = data.image
                    this.optUrl = data.url
//設(shè)置計(jì)時(shí)器
                    this.timer = setTimeout(() => { 
                        clearTimeout(this.timer)
//因?yàn)槲业某绦蚴切枰卿浀?所以這里通過判斷是否有登錄token,來(lái)跳轉(zhuǎn)不同的頁(yè)面,不然跳轉(zhuǎn)到首頁(yè)監(jiān)聽到未登錄又會(huì)跳轉(zhuǎn)到登錄頁(yè);具體跳轉(zhuǎn)根據(jù)自己項(xiàng)目需求來(lái)
                        if (this.token) {
                        this.onSkip()
                        } else {
                            uni.reLaunch({
                                url: '/pages/authorzation/loginAndRegister/loginAndRegister'
                            })
                        }
                    }, 6000)
                } else {
                    this.onSkip()
                }
            },
//給webView賦值,實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(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;
        /*動(dòng)畫停留在最后一幀*/
        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;
        /*動(dòng)畫停留在最后一幀*/
        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>

總結(jié): 用這個(gè)方法實(shí)現(xiàn)會(huì)出現(xiàn)一個(gè)問題,webView加載前會(huì)有一兩秒的白屏,如果pages.json內(nèi),首頁(yè)參數(shù)放在第一的話,會(huì)出現(xiàn)幾秒顯示首頁(yè),然后又顯示開屏頁(yè)面,這個(gè)還沒找到好的解決方法,我是把開屏頁(yè)放在第一,這樣這幾秒顯示的就是開屏頁(yè),但還會(huì)出現(xiàn)二次加載的情況,如果有什么好的解決方案也麻煩留言告訴我一下;
plus.navigator.closeSplashscreen();據(jù)說(shuō)這個(gè)可以處理,但是我沒看出來(lái)
manifest.json中splashscreen->autoclose 設(shè)置為 true，然后設(shè)置splashscreen->delay 的時(shí)間長(zhǎng)一點(diǎn)，可以規(guī)避啟動(dòng)頁(yè)過快關(guān)閉的問題,但是還是會(huì)一閃而過