场景:

        在开发uniapp项目中,跨微信小程序、Android-app、H5开发,使用原生导航栏,购买商品后进入订单确认,提交订单后进行支付,支付成功则跳转支付成功页面,支付失败则跳转待付款订单页。

        跳转后的页面都带有原生导航栏,返回按钮点击可回退页面,即回退到提交订单页,这样回导致用户又可点击提交,再次提交订单,需要在onShow中判断是从哪个页面来,然后重定向。

        在uniapp中没有类似vue导航守卫的钩子,也没有监听路由变化的钩子,可以通过getCurrentPages()获取当前页面栈,都过获取倒数第二个实例route属性,判断上一页,但这仅仅针对向前跳转有用,页面栈的原理是一个数组,向前跳转则push一个实例,回退则是pop一个实例,getCurrentPages()拿到的都是改变后的数组。

        例如:页面栈【1,2,3】,你现在进入第4个页面,页面栈为:【1,2,3, 4】,你又回退到第3个页面,页面栈会弹出最后一个页面4,页面栈又变成了【1,2,3】,这时你获取倒数第二个页面是2,根本不是期望的4,4也随回退丢失了,无法获得。

        好在获取到当前页,即页面栈最后一个,实例上有一个__displayReporter私有属性,此属性的showReferpagepath字段记录了是当前页面是从哪个页面调起的,通过分析此字段即可获得期望的上一页,这个属性通常是页面路径带.html后缀。

    function getFromPath(){
		const pages = getCurrentPages();
		if(pages.length < 1){
			return null
		}else{
			const index = pages.length - 1
			const current = pages[index]
			const fromHtml = current.__displayReporter.showReferpagepath
			return fromHtml.replace('.html', '')
		}
	}

当然,你可以自定义导航栏实现此功能,前提是你得处理各端得兼容性问题。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐