uni-app web-view 多级跳转关闭窗口

web-view 多级跳转会出现以下问题

默认返回会一级一级返回

说明

当用户进行以下操作时,会触发该函数:

Android 实体返回键 (from = backbutton) 顶部导航栏左边的返回按钮 (from = backbutton) 返回 API,即 uni.navigateBack() (from = navigateBack) 注意事项:

  • 只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。
  • 不返回或返回其它值,均会执行默认的返回行为。
  • H5 平台,顶部导航栏返回按钮支持 onBackPress(),浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
  • 暂不支持直接在自定义组件中配置该函数,目前只能是在页面中来处理。

多级返回

部分业务场景下,返回的逻辑中需要返回多级页面。

由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。 此时,需要根据 onBackPress 的回调对象中的 from 值来做处理,当来源是 'navigateBack' 时,返回 false。

解决问题关键是自定义返回逻辑

自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。

onBackPress(event) 返回 event ={from: backbutton | navigateBack}

代码如下

onBackPress(event) {
	if (event.from === 'navigateBack') {  
		return false;  
	}  
				
	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;
},