Uni-App 中 nvue 页面的 webview 返回与页面返回的处理

代码示例

<script setup>
import { systemInfo } from '@/config/app'

const webview = ref()
const webviewId = __.uniqueId('app_webview_')

const webviewTitle = ref(systemInfo.appName)

const loadingTime = ref(Date.now())
function setLoadingTime(time = Date.now()) {
    loadingTime.value = time
}

function back() {
    const curTime = Date.now()
    webview.value.back()
    setTimeout(() => {
        if (curTime < loadingTime.value) {
        } else {
            router.back()
        }
    }, 50)
}

onLoad(({ url }) => {
    webview.value = plus.webview.create(decodeURIComponent(url), webviewId, {
        backButtonAutoControl: 'none',
        plusrequire: 'ahead',
        progress: {
            color: '#f68500',
        },
        popGesture: 'none',
        width: `${systemInfo.windowWidth}px`,
        height: `${systemInfo.windowHeight - systemInfo.statusBarHeight - uni.upx2px(100) - 1}px`,
        top: `${systemInfo.statusBarHeight + uni.upx2px(100) + 1}px`,
    })
    const page = plus.webview.currentWebview()
    page.append(webview.value)
    webview.value.addEventListener(
        'titleUpdate',
        ({ title }) => {
            setLoadingTime()
            webviewTitle.value = title
        },
        false
    )
    webview.value.addEventListener('loading', () => setLoadingTime(), false)
})
</script>

<template>
    <view class="page">
        <ANavigationBar :title="webviewTitle" :onBack="back"></ANavigationBar>
    </view>
</template>

<style lang="scss" scoped></style>