微信小程序解决多级页面返回及实现返回时弹出层提示

解决微信小程序中点击页面返回按钮时需要返回多级的问题

最初使用的方法是在页面的onUnload中再写一个wx.navigateBack()方法，基本上也能实现效果，但不太完美，会出现一些情况：

1. 如果当前页面中有按钮需点击后跳转到其他页面时，页面会出现先返回上一页再跳转到目标页面的效果，需要针对这种情况单独做判断
2. 经测试发现，安卓中可以解决问题，但ios中会出现一级一级跳转的效果，先看到前一个页面再跳转到最终返回的页面

onUnload() {
	wx.navigateBack({
		delta: 2
	})
}

在微信基础库2.16.0以后开始支持page-container组件，通过这个组件可以对右滑手势返回、安卓物理返回键和navigateBack返回三种操作进行控制
使用下列代码可以实现点击页面返回、右滑手势返回、安卓物理键返回直接返回两级，首次点击返回动作或调用navigateBack()关闭的是page-container组件

<page-container
:show="show"
:overlay="false"
@beforeleave="backTip"></page-container>

export default {
	data() {
		return {
			show: true
		}
	}
}
methods: {
	backTip() {
		// 一定要加这个否则可能会出现再次进入该页面无法正常返回的情况
		this.show = false
		uni.navigateBack({
			delta: 2   // 返回层级可自由设定
		})
	}
}

也可通过该方法实现返回前页面提示效果

<page-container
	v-if="showPage"  
	:show="show"
	:overlay="false"
	@beforeleave="backTip"></page-container>
	
// 注意：如果需要根据页面的内容是否发生改动来动态判断是否显示page-container, 可以多加一个变量showPage来判断
// 如果直接手动设置page-container的show为false也是会触发beforeleave回调的

handleSave() {
// 点击页面的保存按钮时，设置已保存变量
this.clickedSave = true
// 调用返回事件
// 在未关闭page-container组件的情况下， 触发的是page-container组件的关闭，会执行beforeleave事件
uni.navigateBack()
},
backTip() {
	// 判断页面内容是否已经保存
	this.show = false
	if(this.clickedSave) {
		// 已保存，再次调用返回事件，这里触发的才是页面的返回
		uni.navigateBack()
	} else {
		// 未保存，弹出提示
		uni.showModal({
			title: '',
			content: '当前页面尚未保存，是否保存离开',
			confirmText: '保存',
			confirmColor: '#01CB62',
			success: (res) => {
				if (res.confirm) {
					// page-container组件已关闭，点击保存按钮，此时handleSave函数中的返回事件触发的就是页面的返回
					this.handleSave()
				} else if (res.cancel) {
					uni.navigateBack()
				}
			}
		})
	}
}