uniapp开发H5,在UC游览器上不能依次返回上一个页面

问题描述:H5在UC浏览器上(用手机才能看出效果)不能依次回退上一个页面,我初始页跳到第二层然后跳到第三层点击返回直接回退到初始页。使用框架原生的头顶导航栏和自定义顶部导航栏(原生的跳转方式或引入uni-simple-router)都会有此问题。初始页跳转关闭之前页面后面存在就是点返回没效果。感觉应该是UC浏览器的问题,不会使用你的页面栈,也不会存储。

百度了很久发现几个也遇到类似的问题,但是都没解决,下面两篇文章

1.H5在UC浏览器上,使用浏览器回退和物理按键后退,使用window.history.go(-1),返回上一级,页面不能依次返回 文章地址
2.vue移动端,在uc浏览器中this.$router.go(-1)会出现后退错误文章地址

最终解决方法

实在没有找到好的解决办法,最后只能在每次跳转的时候去存储当前的页面路径到一个list中(检测当前是否是UC浏览器才进行操作)

1.App.vue中的onLaunch方法里

    //获取当前游览器信息
	var uc = navigator.userAgent;
	//判断是否是UC浏览器
	if (uc.indexOf('UCBrowser') !== -1) {
		const list = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab']
		// 用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
		list.forEach(item => {
			uni.addInterceptor(item, {
				invoke(e) {
					if (uni.getStorageSync("arrList")) {
						arrList = uni.getStorageSync("arrList")
					}
					// 获取要跳转的页面路径(url去掉"?"和"?"后的参数)
					const url = e.url.split('?')[0]
					//跳转时当前路径存储到arrList中
					if(arrList==''){
						arrList.push(url)
					}else{
						let fleg=arrList.some(item=>{
							return item==url
						})
						if(!fleg){
							arrList.push(url)
						}
					}
					uni.setStorageSync("arrList", arrList)
					return e
				},
				fail(err) { // 失败回调拦截
					console.log(err)
				}
			})
		})
	} 

2.在自定义顶部导航栏组件页面中

	// 点击左侧区域
	leftClick() {
	    //获取浏览器信息
		var isUc = navigator.userAgent;
		//判断是否是UC浏览器
		if (isUc.indexOf('UCBrowser') !== -1) {
		    //每次返回在list中删除当前的页面路径
			let arr = uni.getStorageSync("arrList")
			if(arr.length>1){
				uni.reLaunch({
					url:arr[arr.length - 2]
				})
				arr.splice(arr.length-1,1)
				uni.setStorageSync("arrList",arr)
			}
		}else{
			// 如果配置了autoBack,自动返回上一页
			this.$emit('leftClick')
			if (this.autoBack) {
			    //获取页面栈的
				const canNavBack = getCurrentPages()
				//判断游览器是否刷新导致的页面栈消失
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
				//游览器刷新了,就使用历史跳转
					history.back()
				}
			}
		}				
	},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值