uniapp實(shí)現(xiàn)webview頁(yè)面關(guān)閉功能的代碼示例
實(shí)現(xiàn)思路：
1.關(guān)閉按鈕是使用原生button添加的close屬性。（見page.json頁(yè)面）
2.監(jiān)聽關(guān)閉按鈕的方法。（onNavigationBarButtonTap）
3.寫實(shí)現(xiàn)關(guān)閉webview所有頁(yè)面的邏輯。
廢話不多說(shuō)，直接上代碼
1.page.json添加關(guān)閉按鈕
2.webview頁(yè)面實(shí)現(xiàn)關(guān)閉邏輯
實(shí)現(xiàn)代碼：
<template>
<view v-if="params.url">
<web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
url: "https://www.hgjt.com/"
},
webviewStyles: {
progress: {
color: "#027AFF"
}
}
}
},
props: {
src: {
type: [String],
default: null
}
},
onLoad(event) {},
onBackPress(event) {
console.log(event, 'event')
},
onNavigationBarButtonTap(e) {
if (e.type == 'close') {
let pages = getCurrentPages()
let page = pages[pages.length - 1];
let currentPages = page.$getAppWebview()
let children = currentPages.children()
if (children.length === 0) {
uni.navigateBack()
} else {
children[0].close()
setTimeout(() => {
uni.navigateBack()
}, 80)
}
return true;
}
}
}
</script>附：uniapp使用webview的頁(yè)面需要返回兩次
在使用uniapp的webview組件時(shí)，如果需要返回兩次才能退出頁(yè)面，有可能是因?yàn)樵趙ebview中嵌入的H5頁(yè)面中使用了history.back()方法，導(dǎo)致返回棧中多了一層?？梢試L試在H5頁(yè)面中使用history.go(-1)方法或者uni.navigateBack()方法返回上一級(jí)頁(yè)面，這樣就可以避免返回棧中多余的一層，實(shí)現(xiàn)一次返回退出頁(yè)面的效果。另外，也可以在webview組件中設(shè)置vue-router的mode為history模式，這樣就可以使用uni.navigateBack()方法進(jìn)行返回，而不會(huì)出現(xiàn)返回兩次的情況。
總結(jié)
到此這篇關(guān)于uniapp實(shí)現(xiàn)webview頁(yè)面關(guān)閉功能的文章就介紹到這了,更多相關(guān)uniapp webview頁(yè)面關(guān)閉功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3使用ECharts實(shí)現(xiàn)桑基圖的代碼示例
?；鶊D是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復(fù)雜的網(wǎng)絡(luò)關(guān)系和資源流動(dòng),在前端項(xiàng)目中,通過(guò)結(jié)合?Vue?3?和?ECharts,可以快速實(shí)現(xiàn)交互性強(qiáng)、樣式美觀的?；鶊D,本文將通過(guò)完整的代碼示例,帶你一步步完成一個(gè)桑基圖的實(shí)現(xiàn),需要的朋友可以參考下2025-01-01
手把手教你如何使用Vue+Django實(shí)現(xiàn)RBAC權(quán)限管理
在開發(fā)一個(gè)復(fù)雜的Web應(yīng)用時(shí),權(quán)限管理是繞不開的核心環(huán)節(jié),本文將和大家一起探索并實(shí)現(xiàn)一個(gè)基于角色權(quán)限管理系統(tǒng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2026-03-03
Vue3中的動(dòng)畫過(guò)渡實(shí)現(xiàn)技巧分享
在現(xiàn)代的前端開發(fā)中,用戶體驗(yàn)的重要性不言而喻,為了讓應(yīng)用程序更加生動(dòng)和引人注目,動(dòng)畫和過(guò)渡效果是必不可少的元素,本文將以 Vue3 為基礎(chǔ),深入探討如何在應(yīng)用程序中實(shí)現(xiàn)動(dòng)畫過(guò)渡,以及一些技巧和最佳實(shí)踐,需要的朋友可以參考下2025-01-01
詳解關(guān)于Vue版本不匹配問(wèn)題(Vue packages version mismatch)
這篇文章主要介紹了詳解關(guān)于Vue版本不匹配問(wèn)題(Vue packages version mismatch)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vuejs手把手教你寫一個(gè)完整的購(gòu)物車實(shí)例代碼
這篇文章主要介紹了vuejs-手把手教你寫一個(gè)完整的購(gòu)物車實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3 template轉(zhuǎn)為render函數(shù)過(guò)程詳解
在 Vue 中,template 模板是我們編寫組件的主要方式之一,而 Vue 內(nèi)部會(huì)將這些模板轉(zhuǎn)換為 render 函數(shù),render 函數(shù)是用于創(chuàng)建虛擬 DOM 的函數(shù),通過(guò)它,Vue 能夠高效地追蹤 DOM 的變化并進(jìn)行更新,下面我會(huì)通俗易懂地詳細(xì)解釋 Vue 如何將 template 轉(zhuǎn)換為 render 函數(shù)2024-10-10
在Vue中，computed屬性是一種計(jì)算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動(dòng)態(tài)計(jì)算出來(lái)的，下面小編主要來(lái)和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧2023-06-06
vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改
本文主要介紹了vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Nuxt3項(xiàng)目搭建過(guò)程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項(xiàng)目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）,本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過(guò)程，內(nèi)容包含Nuxt3的安裝，基于Vite腳手架（默認(rèn)）構(gòu)建的vue3項(xiàng)目，element-plus的安裝配置，scss的安裝，目錄結(jié)構(gòu)的創(chuàng)建和解釋，需要的朋友可以參考下2022-12-12