h5 or uniapp or WeChat applet, realize the upper left corner to return to the specified page, swipe left to return to the specified page, and the Android physical return key to return to the specified page. Thoughts on the solution

h5 or uniapp or WeChat applet, realize the upper left corner to return to the specified page, swipe sideways and left to return to the specified page, and the Android physical return key returns to the specified page.

uniapp develops apps (non-WeChat applet)

Customized return button in the upper left corner

<i class="iconfont icon-zuojiantou" style="font-size: 24px;" @click="goBack()"></i>

method

goBack(){
    
    
			
				let pages = getCurrentPages();
				//函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面
				var num=pages.length
				//当前页面栈总数
				var backnum
				//需要返回的页数
				for(var i =0;i<num;i++){
    
    
					//循环找到指定页面路由所在的页数
					if(pages[i].route=='pages/xxx/xxx'){
    
    
					console.log(pages[i].route,'pages[i].route')
					//'pages/xxx/xxxx'你需要返回的页面路由
						backnum=num-i-1
						//计算返回的层数,总数-指定页面页数-1
					}		
				}
				console.log(backnum,'backnum')
				uni.navigateBack({
    
    
					delta:backnum
						//返回的页面数,如果 delta 大于现有页面数,则返回到首页。
				})
			
		},

Android physical return key monitoring, this method is at the same level as the life cycle function, you can also try to put it in methods.

onBackPress(options){
    
    //这里是监听安卓物理返回键或者侧滑左滑返回方式
		if(options.from=='navigateBack'){
    
    
			return false
		}else if(options.from=='backbutton'){
    
    //物理键默认返回上一级,我们在这里进行了处理
			this.goBack()//走我们自己的方法
			return true
		}else if('xxxx){
    
    //也可以是其他方式
		
		}
	}

WeChat applet written by uniapp

The idea is that the WeChat applet written by uniapp cannot use onBackPress to monitor and does not support monitoring Android physical returns, so I changed my mind and thought it was Android physical keys or sliding left and right to return by default: If it is my own button, use goBackFn method, set androidReturn to true, and the method in beforeDestroy will not be executed when leaving the page; if it is a physical button return, then leaving the page will trigger the life cycle function beforeDestroy, so before destroying the page, determine whether it is a physical button return. If so, call goBack


<i class="iconfont icon-zuojiantou" style="font-size: 24px;" @click="goBackFn()"></i>
Define the parameters in the data of the return button in the upper left corner written by yourself

androidReturn:true,//默认安卓物理键返回

Define method

goBack(){
    
    
	let pages = getCurrentPages();
				//函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面
				var num=pages.length
				//当前页面栈总数
				var backnum
				//需要返回的页数
				for(var i =0;i<num;i++){
    
    
					//循环找到指定页面路由所在的页数
					if(pages[i].route=='pages/xxx/xxx'){
    
    
					console.log(pages[i].route,'pages[i].route')
						backnum=num-i-1
						//计算返回的层数,总数-指定页面页数-1
					}		
				}
				console.log(backnum,'backnum')
				uni.navigateBack({
    
    
					delta:backnum
						//返回的页面数,如果 delta 大于现有页面数,则返回到首页。
				})
}

Writing code for the life cycle hook function can realize the upper left corner return that comes with the WeChat applet, and Android physical keys, swipe sideways and swipe left to return

//uniapp内置了vue,所以可以用vue的生命周期
beforeDestroy() {
    
    
		if(this.androidReturn){
    
    console.log('物理键返回')
			this.goBack()
		}
	},

Customize the return of the security check in the upper left corner

goBackFn(){
    
    
			this.androidReturn=false;
			this.goBack();
		},

Guess you like

Origin blog.csdn.net/qq_40739261/article/details/134871347