uniapp實現(xiàn)webview頁面關(guān)閉功能的代碼示例
更新時間：2024年03月01日 10:58:01 作者：愛池魚的醬醬仔
uniapp用web-view打開一個網(wǎng)頁,網(wǎng)頁中點擊跳轉(zhuǎn)到下一層級的網(wǎng)頁,一層層深入,點擊返回鍵或者頁面上方返回按鈕只能一層層往回退,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)webview頁面關(guān)閉功能的相關(guān)資料,需要的朋友可以參考下
實現(xiàn)思路：
1.關(guān)閉按鈕是使用原生button添加的close屬性。（見page.json頁面）
2.監(jiān)聽關(guān)閉按鈕的方法。（onNavigationBarButtonTap）
3.寫實現(xiàn)關(guān)閉webview所有頁面的邏輯。
廢話不多說，直接上代碼
1.page.json添加關(guān)閉按鈕
2.webview頁面實現(xiàn)關(guān)閉邏輯
實現(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的頁面需要返回兩次
在使用uniapp的webview組件時，如果需要返回兩次才能退出頁面，有可能是因為在webview中嵌入的H5頁面中使用了history.back()方法，導(dǎo)致返回棧中多了一層。可以嘗試在H5頁面中使用history.go(-1)方法或者uni.navigateBack()方法返回上一級頁面，這樣就可以避免返回棧中多余的一層，實現(xiàn)一次返回退出頁面的效果。另外，也可以在webview組件中設(shè)置vue-router的mode為history模式，這樣就可以使用uni.navigateBack()方法進行返回，而不會出現(xiàn)返回兩次的情況。
總結(jié)
到此這篇關(guān)于uniapp實現(xiàn)webview頁面關(guān)閉功能的文章就介紹到這了,更多相關(guān)uniapp webview頁面關(guān)閉功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Rsbuild,一個基于Rspack的高效Web構(gòu)建工具,將Rspack的強大功能與易用性相結(jié)合,是你項目搭建的不二之選,Rsbuild不僅提供了開箱即用的體驗,還引入了高性能的構(gòu)建機制,本文給大家介紹了Vue2遷移Rsbuild詳細步驟,需要的朋友可以參考下2024-10-10
vue3使用vue3-print-nb實現(xiàn)區(qū)域打印功能
這篇文章主要給大家介紹了關(guān)于vue3使用vue3-print-nb實現(xiàn)區(qū)域打印功能的相關(guān)資料,在日常操作中,相信很多人在Vue怎么用插件實現(xiàn)打印功能問題上存在疑惑,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在頁面進行pdf預(yù)覽的時候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來通過本文給大家介紹vue使用pdf.js來進行pdf預(yù)覽,需要的朋友可以參考下2021-12-12
使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法
這篇文章主要介紹了使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法，解決方法不復(fù)雜通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue解決刷新頁面時會出現(xiàn)變量閃爍的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了Vue中使用eslint和editorconfig方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了關(guān)于Vue中添加滾動事件設(shè)置的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本文主要介紹了VUE項目自動檢測服務(wù)端是否發(fā)布了新版本,通過輪詢方式檢測Vue項目新版本并提示用戶刷新頁面,具有一定的參考價值,感興趣的可以了解一下2025-01-01